【问题标题】:New to Javascript, need help with HTML5 audio "playlist"Javascript 新手,需要 HTML5 音频“播放列表”方面的帮助
【发布时间】:2010-11-06 20:20:07
【问题描述】:

我正在尝试使用 HTML5 和 javascript 的组合创建一种可以在 iPhone 上运行的播放列表功能。我对这个平台很陌生,我希望这里有人可以帮助我找出我的代码的问题。第一首歌曲正确地自动播放,但当它结束时,下一首歌曲不会加载和播放。下面提供了我网站的 javascript 代码,在此先感谢。 (如果这段代码非常混乱,我深表歉意,我根据 iv 学到的东西和我在网上可以找到不同的地方组装了这个)

<script type="text/javascript">
var songname="Bottoms Up";
var counter=1;
var totalsongs=3;
while (counter<=totalsongs-1) {
document.write(<h2>songname</h2>);
switch (counter) {
case 1:
var nextSong="audio/Hey.mp3";
var audioPlayer=document.getElementById('audioPlayer');
audioPlayer.onend = function() {
audioPlayer.src = nextSong;
songname="Hey";
counter=(counter+1);
if(counter>totalsongs-1) {
counter=1;
    } //if close
    } //onend function close
case 2:
var nextSong="audio/I Like It.mp3";
var audioPlayer=document.getElementById('audioPlayer');
audioPlayer.onend = function() {
audioPlayer.src = nextSong;
songname="I Like It";
counter=(counter+1);
if(counter>totalsongs-1) {
counter=1;
    } //if close
    } //onend function close
} //switch close
} //while close
</script>
<center><audio src="audio/Bottoms Up.mp3" autoplay controls /></center>

【问题讨论】:

    标签: javascript iphone html audio playlist


    【解决方案1】:

    一些事情:

    audio元素一个id:

    <audio src="audio/Bottoms Up.mp3" autoplay controls id="audioPlayer" /></center>
    

    使用数组而不是许多变量:

    var songs=({{"title": "First title","filename":"firstfile.mp3"},
            {"title": "Second title","filename":"secondfile.mp3"}});
    

    像这样收听ended的事件:

    document.getElementById("audioPlayer").addEventListener("ended", nextSong, false);
    

    并将脚本放在&lt;head&gt; 元素中。

    【讨论】:

    • 抱歉最后一个问题,事件监听器是在身体还是头部?我以前没用过。
    【解决方案2】:
    var audioPlayer=document.getElementById('audioPlayer');
    

    ... 会出错,因为元素没有 id。

    【讨论】:

    • 哦,我发现这是在其他地方用 videoPlayer 完成的,并假设命名是一样的,有没有我应该咨询的在线资源来查找这些东西的名称?
    • 视频播放器仍然需要一个 ID。我建议阅读dev.opera.com/articles/view/… 的“JavaScript 核心技能”部分
    • 哦,现在我明白了其他人做了什么,我会检查那个链接谢谢,我刚刚通过 w3schools javascript 指南工作
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-14
    • 1970-01-01
    • 2023-04-07
    相关资源
    最近更新 更多