javascript - 伴随着名字连续播放的音乐

标签 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]

有什么建议吗?

最佳答案

您可能想要制作一个小型媒体播放器,如果是这样的话,可以使用大量现成的脚本来帮助您完成此任务。 (谷歌是你的 friend )。

如果您确实决定自己去做,这是我的想法,它们可能会帮助您朝着正确的方向前进。

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 音频规范,但我会按照这些思路假设它。

希望对你有帮助

关于javascript - 伴随着名字连续播放的音乐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12517857/

相关文章:

javascript - 如何在课后删除空元素?(jQuery)

javascript - jQuery(element) 是逐个选择每个元素还是一次性选择所有元素?

javascript - 如何使用 aframe 以编程方式创建场景

javascript - SCSS根据id添加动画

javascript - Lokesh Dhakar 的灯箱未显示图像(尽管痕迹表明它正在工作!)

php - 是否可以只搜索一页?

javascript - 无法附加多个视频

javascript - 在Javascript中动态地将多个对象存储在数组中

javascript - 哪些形式的 JavaScript 适合中级 Rails 开发人员(仅团队中的开发人员)?

javascript - 覆盖整个屏幕的弹出窗口