音乐连续播放着名字

时间:2012-09-20 17:36:13

标签: javascript jquery html html5-audio audio-player

我实际上能够在不重新加载的情况下在整个页面上连续播放音乐,使用帧(我知道连续播放的音乐并不是一个好主意,但客户真的要求它,所以我别无选择)。以下是我用于音乐播放框架的内容:

<body>
    <div id="player">
    <audio id="audio" controls="controls" autoplay="autoplay" loop="loop" style="width:150px;">
      <source src="martnalia05namoracomigo.ogg" type="audio/ogg" />
      <source src="martnalia05namoracomigo.mp3" type="audio/mp3" />
      <embed src="martnalia05namoracomigo.mp3" hidden="true" loop="TRUE" autostart="TRUE"></embed>
    </audio>
    </div>
</body>

我插入此音乐只是为了测试,我想知道是否可以制作播放列表,是否可以通知当前播放的音乐中的链接和跳过的按钮音乐,例如:

[player]
| button previous  | button to play/pause | button next
| name of the music (link to the page of the Album) | 
[end of player]

有什么建议吗?

2 个答案:

答案 0 :(得分:1)

您可能想要制作一个小型媒体播放器,如果是这样的话,那里有大量现成的脚本可以帮助您实现这一目标。 (谷歌是你的朋友)。

如果您决定自己动手,我的想法是,他们可以帮助您朝着正确的方向前进。

var data = [{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"},
            {audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"}];

用于存储曲目详细信息的某种数据结构。

var audio = document.getElementById("audio");
audio.addEventListener('ended', playNext);

最后处理音轨切换的某种功能

var currentTrack = 0;
function playNext(options){
    currentTrack++;
    if (currentTrack > data.length){
        currentTrack = 0;
    }
    var audiosrc = document.getElementById('embed_element_id') // or some other selector method
    audiosrc.src = data[currentTrack].audiourl;
    audiosrc.play();
}

我不完全确定HTML5音频规范,但我会假设它沿着这些方向。

希望这有帮助

答案 1 :(得分:0)

你可能不得不使用媒体播放器插件。试试LeanBack播放器:

http://leanbackplayer.com/ + http://leanbackplayer.com/player_extensions.html(XSPF音频播放列表扩展程序)

这是带有Flash后备选项的HTML5 / CSS / JS,因此您应该能够轻松地设置它以满足您的需求。