使用 Javascript 播放音频元素 (html5)

Posted 2023-02-25

【中文标题】使用 Javascript 播放音频元素 (html5)

【英文标题】：Using Javascript to play an audioelement (html5)

【发布时间】：2011-06-16 02:38:28

【问题描述】：

我试图弄清楚如何触发从 javascript 播放音频。我得到了一些看起来像这样的 html：

<div class='audio' >foo
<audio preload='auto' controls src='test.wav'>
<b>Your browser does not support the audio tag.</b>
</audio>
</div>

我正在尝试通过以下方式触发它：

$(document).ready(function () 
    $('.audio').each(function()
        var audio = $(this).find('audio').get();
        $(this).click(function()
            audio.volume = 100;
            alert('1 '+audio);
            audio.play();
            alert('2');
        );
    );
);

alert('1'+音频);按预期工作并将音频报告为 HTMLAudioElement。然而 alert('2');未调用，因为我收到错误“audio.play”不是函数。我该怎么做才能解决这个问题？

【问题讨论】：

您的意思是说您收到一条错误消息，指出“audio.play”不是函数吗？我很确定“alert.play”不是一个函数是正确的，除非您专门使用 play 方法定义了一个新的警报对象。

从 Firefox Errorconsole 复制和粘贴：错误：audio.play 不是一个函数 - 当然是一个好问题，但遗憾的是它是真的 o.O

这更有意义 - 我假设这就是您的意思，但只是想确保您的实际代码中没有错字。

【参考方案1】：

您的代码看起来很完美。您遇到的错误是“alert.play”不是函数或“audio.play”不是函数。

我觉得

var audio = $(this).find('audio').get();

返回一个数组试试这个

var audio = $(this).find('audio').get(0);

【讨论】：

谢谢 :D - 我现在可以用重物打击自己，但让这东西终于运行起来感觉很好。

【参考方案2】：

如果你给音频标签一个 ID，那么只用 JavaScript 控制音频就更容易了：

<audio id="myAudioTagID" type="audio/mpeg" src="sound.mp3"></audio>

然后您可以简单地获取元素并应用 .pause()、.start()、stop() ：

var audio = document.getElementById("myAudioTagID");
audio.play();
audio.pause();
audio.stop();