jQuery之媒体音乐播放器

Posted 2020-07-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery之媒体音乐播放器相关的知识，希望对你有一定的参考价值。

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery之媒体音乐播放器</title> <link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/files/caidupingblogs/musicplaymaindesign.css"> </head> <body> <div class=‘jAudio--player‘> <audio></audio> <div class=‘jAudio--ui‘> <div class=‘jAudio--thumb‘></div> <div class=‘jAudio--status-bar‘> <div class=‘jAudio--details‘></div> <div class=‘jAudio--volume-bar‘></div> <div class=‘jAudio--progress-bar‘> <div class=‘jAudio--progress-bar-wrapper‘> <div class=‘jAudio--progress-bar-played‘> <span class=‘jAudio--progress-bar-pointer‘></span> </div> </div> </div> <div class=‘jAudio--time‘> <span class=‘jAudio--time-elapsed‘>00:00</span> <span class=‘jAudio--time-total‘>00:00</span> </div> </div> </div> <div class=‘jAudio--playlist‘> </div> <div class=‘jAudio--controls‘> <ul> <li><button class=‘btn‘ data-action=‘prev‘ id=‘btn-prev‘><span></span></button></li> <li><button class=‘btn‘ data-action=‘play‘ id=‘btn-play‘><span></span></button></li> <li><button class=‘btn‘ data-action=‘next‘ id=‘btn-next‘><span></span></button></li> </ul> </div> </div> <script src=‘http://files.cnblogs.com/files/caidupingblogs/jquery-2.1.4.min.js‘></script> <script src=‘http://files.cnblogs.com/files/caidupingblogs/jaudio.js‘></script> <script> var t = { playlist:[ { file: "http://fs.pc.kugou.com/201605201829/23b4bac00bce3e17e936cabfe803bb3d/G009/M01/00/15/qYYBAFT-xg6AD0U0ADWd1rP5Jvg525.mp3", thumb: "http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/t_01.jpg", trackName: "Love", trackArtist: "Tobu & Syndec", trackAlbum: "Single", }, { file: "http://fs.pc.kugou.com/201605201830/9c835d0052e4c2158eaf623f59b82077/G004/M02/16/1D/RA0DAFUAZMqAQXbTADCEF2lVTAA601.mp3", thumb: "http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/t_02.jpg", trackName: "Barbie", trackArtist: "Disfigure", trackAlbum: "Single", }, { file: "http://fs.pc.kugou.com/201605201831/6ae15c6a2e5921ffb59425b1d56e84b0/G029/M06/01/1F/_ZMEAFWHcvWATNcoAHgDH0iIXFw750.mp3", thumb: "http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/t_03.jpg", trackName: "Fade", trackArtist: "Alan Walker", trackAlbum: "Single", } ], autoPlay:true } $(".jAudio--player").jAudio(t); </script> </body>

以上是关于jQuery之媒体音乐播放器的主要内容，如果未能解决你的问题，请参考以下文章