javascript - Html Javascript 音频播放器

Question

我想在我的项目中实现一个带有播放列表的 html 音频播放器。我浏览了许多 jquery 插件（jplayer 等），但这并不能满足我的要求。

实际上，应该向具有其他信息的用户显示歌曲列表，例如（评级、价格、时间、立即购买）。Jplayer 库提供播放 plylist 的实用程序，但歌曲列表不容易自定义。

任何人都可以帮我举一个这样的音频播放器的例子，或者附近关于这个的例子，或者任何关于相同的说明都会有很大的帮助。

谢谢

Answer 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);

​</p>

Answer 2

看看这个音乐播放器演示，看起来它可能适合构建。