Jquery + jplayer: mp3 music player with lyrics synchronization, jqueryjplayer

Jquery + jplayer: mp3 music player with lyrics synchronization, jqueryjplayer

 

Instance Preview

 

Instance code

<Div class = "container"> <div class = "demo"> <textarea id = "lrc_content" name = "textfield" cols = "70" rows = "10" style = "display: none; "> [00: 03. 00] onion [00: 06. 00] Singing: Ping. 00] [00: 11. 38] If you look at me for a moment. 23] If you can hear a heartbroken VOICE. 88] I will always be a secondary role in the back of the plate. 74] secretly watching you secretly hide yourself. 48] [00: 44. 90] If You Want To layer by layer. 46] a layer of peel off my heart. 66] You will find that you will be surprised. 40] You are my most depressing secret. 26] If you want to create a layer. 69] a layer of peeling my heart. 76] You will get sore and cry. 60] As long as you can hear me see my whole heart. 30. 11] If you want to build a layer. 57] One Layer stripped my heart. 66] You will find that you will be surprised. 41] You are my most depressing and deepest secret. 48] If you want a layer. 58] One Layer stripped my heart. 51] You will be sour, and you will cry. 15] As long as you can hear me see my whole heart. 55] [0: 55. 65] You will be sour, and you will cry. 84] As long as you can hear me see my whole heart. 57] </textarea> <div class = "music_box"> <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> <a href =" javascript :; "class =" jp-pause "tabindex =" 1 "> pause </a> </li> <a href =" javascript :; "class =" jp-stop "tabindex =" 1 "> stop </a> </li> <a href =" javascript :; "class =" jp-mute "tabindex =" 1 "title =" mute "> mute </a> </li> <a href =" javascript :; "class =" jp-unmute "tabindex =" 1 "title =" unmute "> unmute </a> </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 class = "jp-volume-bar"> <div class = "jp-volume-bar-value"> </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> <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> manual Network </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 class = "content"> <ul id = "lrc_list"> <li> click the play button above ...... </Li> </ul> </div> <script type = "text/javascript" src = "// developer.bdimg.com/libs/jquery/1.11.3/jquery.min.js"> </script> <script type = "text/javascript" src = "/api/jq/5733e33322180/js/jquery. jplayer. js "> </script> <script type =" text/javascript "src ="/api/jq/5733e33322180/js/lrc. js "> </script> <script type =" text/javascript "> $ (function () {$ (" # jquery_jplayer_1 "). jPlayer ({ready: function (Event) {$ (this ). jPlayer ("setMedia", {mp3: "yangcong.mp3" // mp3 playback address}) ;}, timeupdate: function (event) {if (event. jPlayer. status. currentTime = 0) {time = "";} else {time = event. jPlayer. status. currentTime ;}, play: function (event) {// click Start method to call lrc. Start method returns time $. lrc. start ($ ('# lrc_content '). val (), function () {return time ;}) ;}, ended: function (event) {$ ("# lrc_list "). removeAttr ("style" pai.html ("<li> the song has been played! </Li> ") ;}, swfPath:" js ", // The Decision Path for saving jplayer.swf solution:" html, flash ", // supported page supplied:" mp3 ", // supported audio format wmode: "window"}) ;}); </script>