- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>-powered by widuu xiaowei</title>
- <meta http-equiv="Cache-Control" content="no-cache">
- <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.4">
- <meta name="MobileOptimized" content="240">
- <link />
- <script type="text/javascript" src1="/mp3/js/jquery.js"></script>
- <script type="text/javascript" src1="/mp3/js/jquery.jplayer.js"></script>
- <script type="text/javascript" src1="/mp3/js/lrc.js"></script>
- <style type="text/CSS">
- *
- {
- margin: 0;
- padding: 0;
- }
- ul, ol, dl
- {
- list-style: none;
- }
- .content li.hover
- {
- color: red;
- }
- .content
- {
- width: 402px;
- height: 200px;
- background: #ccc;
- overflow: hidden;
- padding: 10px;
- }
- </style>
- <script>
- //<![CDATA[
- $(document).ready(function () {
- $("#jquery_jplayer_1").jPlayer({
- ready: function (event) {
- $(this).jPlayer("setMedia", {
- mp3: "yangcong.mp3" //mp3
- }).jPlayer("play");
- },
- timeupdate: function (event) {
- if (event.jPlayer.status.currentTime == 0) {
- time = "";
- } else {
- time = event.jPlayer.status.currentTime;
- }
- },
- play: function (event) {
- //lrcstart time
- if (event.jPlayer.status.currentTime == 0) {
- $("#jquery_jplayer_1").jPlayer("pause", 1);
- }
- if ($('#lrc_content').val() !== "") {
- $.lrc.start($('#lrc_content').val(), function () {
- return time;
- });
- } else {
- $(".content").html("");
- }
- },
- repeat: function (event) {
- if (event.jPlayer.options.loop) {
- $(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function () {
- $(this).jPlayer("play");
- });
- } else {
- $(this).unbind(".jPlayerRepeat");
- }
- },
- swfPath: "/js", //jplayer.swf
- solution: "html, flash", //
- supplied: "mp3", //
- wmode: "window"
- });
- $("#lrc_content").hide();
- });
- //]]>
- </script>
- </head>
- <body>
- <textarea id="lrc_content" name="textfield" cols="70" rows="10">
- [ar: ]
- [00:03.00]
- [00:06.00]
- [00:09.00]
- [00:11.38]
- [00:21.23]
- [00:28.88]
- [00:35.74]
- [00:43.48]
- [00:44.90]
- [00:48.46]
- [00:52.66]
- [00:56.40]
- [01:00.26]
- [01:03.69]
- [01:07.76]
- [01:11.60]
- [01:18.30]
- [01:19.11]
- [01:22.57]
- [01:26.66]
- [01:30.41]
- [01:34.48]
- [01:37.58]
- [01:41.51]
- [01:45.15]
- [01:53.55]
- [01:55.65]
- [01:59.84]
- [02:12.57]
- </textarea>
- <p>
- <div id="jquery_jplayer_1" class="jp-jplayer"></div>
- <div id="jp_container_1" class="jp-audio">
- <div class="jp-type-single">
- <div class="jp-gui jp-interface">
- <ul class="jp-controls">
- <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
- <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
- <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
- <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
- <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
- <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
- </ul>
- <div class="jp-progress">
- <div class="jp-seek-bar">
- <div class="jp-play-bar"></div>
- </div>
- </div>
- <div class="jp-volume-bar">
- <div class="jp-volume-bar-value"></div>
- </div>
- <div class="jp-time-holder">
- <div class="jp-current-time"></div>
- <div class="jp-duration"></div>
- <ul class="jp-toggles">
- <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
- <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
- </ul>
- </div>
- </div>
- <div class="jp-title">
- <ul>
- <li>mp3player powered by xiaowei</li>
- </ul>
- </div>
- <div class="jp-no-solution">
- <span>Update Required</span>
- To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
- </div>
- </div>
- </div>
- <div class="content">
- <ul id="lrc_list">
- </ul>
- </div>
- <br />
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/171220138073.html
来源: http://www.codesnippet.cn/detail/171220138073.html