2012-06-19 130 views
-3

我想在我的项目中实现一个带有播放列表的html音频播放器。我经历了很多jquery插件(jplayer等),但这并不符合我的要求。Html Javascript音频播放器

实际上,歌曲列表将显示给用户,其中包含其他信息(评分,价格,时间,现在购买)。 Jplayer库提供了播放plylist的工具,但是歌曲列表不容易定制。

任何人都可以请帮助我一个这样的音频播放器的例子或接近这个或任何指示相同将是很大的帮助。

感谢

+0

用一个简单的“HTML 5音频播放器”谷歌电源: [10 HTML5播放器](http://www.catswhocode.com/blog/10-awesome-html5-audio-players) – jbrtrnd

+0

公司相反,您可以自定义它。我正在使用jPlayer。制作你想要的东西很好。 –

+0

@Habip但是这是从jquery生成html,如果我想在播放列表中添加更多的字段,那么它有可能如何?它从js文件生成整个html – phpgeek

回答

1

一个简单的演示Chrome浏览器:http://jsfiddle.net/yJfbX/2/

播放列表是一个普通的无序列表所以它是通过CSS轻松定制。请认为这是概念的一个简单证明创建自己的播放列表,因为我还没有考虑不同的音频容器比MP3

标记

<ul id="playlist"> 
    <li data-src="http://....mp3">title 1</li> 
    <li data-src="http://....mp3">title 2</li> 
    <li data-src="http://....mp3">title 3</li> 
</ul> 

jQuery的

var audio = new Audio(); 
    playlist = $('#playlist'); 

    playlist.on('click', 'li', function() { 
     playlist.find('.current').removeClass('current'); 
     $(this).addClass('current'); 
     audio.src = $(this).data('src'); 
     audio.play(); 
    }); 

audio.controls = true; 
document.body.appendChild(audio); 

0

看看this music player demo,看起来像它可能适合构建。

+0

再次,该领域是有限的....我需要这样的东西http://www.jeejuh.com/ – phpgeek