Question

我试图创建一个 .mp3 播放器来循环播放音频曲目，但我在Firebug上遇到错误，我使用的主要功能是未定义的，尽管我确实定义了它。这是代码：

$(document).ready(function() {
var counter=1;
var nextSong = function(){
    if (counter <= 3) {
        $('audio').src="audio/audio"+counter+".ogg";
        $this.load();
        $this.play();
        counter++;
    }
    else {
        counter=0;
        $('audio').src="audio/audio"+counter+".ogg";
        $this.load();
        $this.play();
    };
  };
});

我的标记很简单：

<!DOCTYPE html>
    <head>
        <title>Dokimastiko Audio Player</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/dokimastiko.js"></script>
    </head>
    <body>
        <audio src="audio/audio1.ogg" controls autoplay onended="nextSong();"></audio>
    </body>

有什么想法吗？

Answer 1

我辩论是否要给你一个完整的教训，说明为什么你的代码非常糟糕......而且由于我现在的工作很少，所以我会这样做......：P

首先，你所拥有的$this是未定义的，所以显然在它上面调用一个方法也是未定义的。

你可能从某个地方复制了代码，这很好，但是你需要能够聪明地而不是盲目地复制。

....你在我的帖子中间更改了你的代码，所以更新： $(this)与$(document)相同，因为这是this

中$(document).ready(function() {})的上下文

所以，不，还是错了。

所以第一次修改应该是：

$('audio').load();
$('audio').play();

但实际上这仍然是错误的。因为$('audio')是一个jquery对象，并且它不直接包含DOM级方法load和play，所以你需要获取DOM对象：

$('audio').get(0).load();
$('audio').get(0).play();

现在你想知道为什么.get(0)，因为$('audio')是<{1>}所有匹配的集合，所以{ {1}}仅返回第一个。

如果您决定向页面添加更多'audio'标记，则很容易破损，因此您应该为音频标记添加唯一标识符：

get(0)

然后在jquery选择器中使用id：

audio

这仍然很冗长，但鉴于你只需要这样做，这是最简单的方法。

的更新： 的

根据@JanDvorak的建议，这里有一个使用jquery事件的例子

小提琴：http://jsfiddle.net/MpBP5/1/

<audio src="audio/audio1.ogg" controls autoplay onended="nextSong();" id="audio1"></audio>

我也可以继续这个＆＃34;课程＃34;你应该尽量不抽象地定义你的音乐网址，如果有人刚刚离开你的网页并且它点击了一个文件，该计数器＃，不存在吗？

我会声明您要加载的文件数组：

$('#audio1').get(0).load(); $('#audio1').get(0).play();

然后遍历列表：

jQuery(document).ready( function($) { $('#audio1').bind('ended', function(e) { alert('end'); }); });

http://jsfiddle.net/MpBP5/3/

如果您不想播放固定的音频文件列表（您确实应该这样做），您可以使用至少一些规则生成阵列。

jQuery播放列表功能错误：函数未定义

1 个答案: