·您当前的位置:主页 > 技术教程 > 播放器教程 >

精致html5音乐播放器界面美观(支持mp3格式和支持列表连播)

时间:2017-03-20 15:07来源:酷播  极酷网页播放器
这款是html5+jquery代码写的一款精致音乐播放器列表版,支持列表是它的特色。精致html5音乐播放器界面美观(支持mp3格式和支持列表连播)

精致html5音乐播放器界面美观(支持mp3格式和支持列表连播)
演示地址:
http://www.52player.com/Demos/html5mp3musiclist/
下载地址:
http://www.52player.com/MusicPlayer/2017/0320325.html

1.这款是html5+jquery代码写的一款精致音乐播放器列表版,支持列表是它的特色。
2.爱播网整理收集,支持列表连播功能,支持多首歌曲播放。
3.界面方面还不错,css也可以自己设定界面色彩的。
4. 列表方面直接添加歌曲名字和地址及缩图即可,参考如下:

  1. <div id="playlist"> 
  2.         <ul> 
  3.             <li t_cover="bianxingjingang.jpg" t_artist="变形金刚主题曲" t_name="Transformers"> 
  4.                 <a href="#">变形金刚主题曲 – Transformers</a> 
  5.                 <audio preload="none"> 
  6.                     <source src="Media/Transformers.mp3" type="audio/mp3"> 
  7.                     <source src="http://www.datouwang.com/" type="audio/ogg; codecs=vorbis"> 
  8.                 </audio> 
  9.             </li> 
  10.             <li t_cover="dengziqi.jpg" t_artist="邓紫棋" t_name="喜欢你"> 
  11.                 <a href="#">邓紫棋 – 喜欢你</a> 
  12.                 <audio preload="none"> 
  13.                     <source src="http://sc1.111ttt.com/2014/1/09/12/2121908298.mp3" type="audio/mp3"> 
  14.                     <source src="http://www.datouwang.com/" type="audio/ogg; codecs=vorbis"> 
  15.                 </audio> 
  16.             </li> 
  17.             <li t_cover="zhoujielun.jpg" t_artist="周杰伦" t_name="最长的电影"> 
  18.                 <a href="#">周杰伦 – 最长的电影</a> 
  19.                 <audio preload="none"> 
  20.                     <source src="http://sc.111ttt.com/up/mp3/21567/82A1E2ED54A07B173CDEAFD38DF63C4F.mp3" type="audio/mp3"> 
  21.                     <source src="http://www.datouwang.com/" type="audio/ogg; codecs=vorbis"> 
  22.                 </audio> 
  23.             </li> 
  24.             <li t_cover="dengziqi.jpg" t_artist="男生版" t_name="泡沫"> 
  25.                 <a href="#">男生版 – 泡沫</a> 
  26.                 <audio preload="none"> 
  27.                     <source src="http://sc.111ttt.com/up/mp3/325955/BEBEB47B017439208D11F62558E9A9D1.mp3" type="audio/mp3"> 
  28.                     <source src="http://www.datouwang.com/" type="audio/ogg; codecs=vorbis"> 
  29.                 </audio> 
  30.             </li> 
  31.             <li t_cover="taozhe.jpg" t_artist="陶喆" t_name="爱我还说他"> 
  32.                 <a href="#">陶喆 – 爱我还说他</a> 
  33.                 <audio preload="none"> 
  34.                     <source src="http://sc.111ttt.com/up/mp3/75773/A444FCBC6F3003067D83C5CD83DB191B.mp3" type="audio/mp3"> 
  35.                     <source src="http://www.datouwang.com/" type="audio/ogg; codecs=vorbis"> 
  36.                 </audio> 
  37.             </li> 
  38.         </ul> 
  39.     </div> 

 演示地址:http://www.52player.com/Demos/html5mp3musiclist/
下载地址:
http://www.52player.com/MusicPlayer/2017/0320325.html