HTML5 音频 - 声音只播放一次答案

【问题标题】：HTML5 Audio - Sound only plays onceHTML5 音频 - 声音只播放一次
【发布时间】：2012-03-09 06:50:51
【问题描述】：

我正在使用 Chrome，这是我的代码：

<audio id="letter_audio" src="audio/bomb.mp3" type="audio/mp3" preload="auto"></audio>

    $('.sound').live('click', function () {

        var sound = $("#letter_audio")[0];  

        sound.pause();
        sound.currentTime = 0;
        sound.play();

        return false;
    });

我第一次点击播放时为什么会播放声音。然后当我再次单击时，它会暂停，就像代码一样。但它只是保持暂停？我想让它播放，然后当我再次点击它时，回到 0 并像代码中一样再次播放？

【问题讨论】：

Tom 添加 sound.load() 的解决方案对我有用

标签： jquery google-chrome html5-audio

【解决方案1】：

我在重放音频时遇到了类似的问题，但通过在调用 play() 之前调用 load() 方法设法解决了这个问题。试试这个：

$('.sound').live('click', function () {
    var sound = $("#letter_audio")[0];

    sound.load();
    sound.play();

    return false;
});

我认为这比重置src 属性更好，原因有两个：

将 src 值保留在页面内容中，而不是在 JavaScript 中

当您嵌入多个不同音频格式的 <source> 元素时有效：

<audio id="letter_audio">
   <source src="audio/bomb.mp3" type="audio/mp3" preload="auto"/>
   <source src="audio/bomb.ogg" type="audio/ogg" preload="auto"/>
</audio>

【讨论】：

这是一个很好的解决方案，但我希望我能更好地理解问题的原因。根据MDN 和WHATWG 的描述，.load() 似乎有点矫枉过正。如果我在尝试play() 后输出sound.error，则消息为“发送音频包解码失败”。这对我来说听起来像是一个错误，但我能找到的只是一些非常松散的相关。 .load() 对于 OGG 文件不是必需的。

【解决方案2】：

试试这个.. 基本上，重置 src 属性应该会根据需要重置音频。

$('.sound').live('click', function () {

    var sound = $("#letter_audio")[0];  

    sound.src = "audio/bomb.mp3";
    sound.play();

    return false;
});

【讨论】：

谢谢！这行得通，但是...看起来每次您“更改” src 时它都会发送对 mp3 的请求。所以有点贵
它不贵 - 它很便宜.. 只有第一次点击会引发任何网络活动.. 后续点击直接在本地磁盘缓存中访问 mp3 - 完全没有成本.. 自己在 Chrome 中查看开发工具，网络选项卡
是的，但他是对的。每次您更改 src 时，它都会发送一个请求。
但是，如果您有一个文件要尝试在移动设备上间隔播放，则此方法效果不佳，因为所有播放操作都需要从用户交互中引导。如果您将声音作为设置变量，那么在第一次启动时，文件被“加载”，您可以一次又一次地使用播放，而无需用户单击按钮。
当您在source 标签内使用ogg、wav、mp3 等多种音频格式时，这也不起作用..

【解决方案3】：

似乎目前 currentTime 属性是只读的（在 2011 年它有一个wont-fix status）

然而，在你的音频对象上设置src 之后（再次） - 就像@Lloyd 提出的一样 - currentTime 属性变得可设置（至少在当前的 chrome 版本的 linux (24.0.1312.69) 上）。

这意味着通过添加奇怪的行

audio.src = audio.src

你的例子做了它应该做的。

全文：

$('.sound').live('click', function () {

    var sound = $("#letter_audio")[0];  
    sound.src = sound.src;  
    sound.pause();
    sound.currentTime = 0;
    sound.play();

    return false;
});

因为设置一次src 就足够了，您可能想在设置过程中的某个地方调用它。

【讨论】：

【解决方案4】：

你可以使用php在url末尾加上time();

<source src="URLtoTrack.mp3?<?php echo time(); ?>" />

为我工作。

【讨论】：

【解决方案5】：

这对我来说是 2021 年 9 月 - 在 Chrome 中测试。

function playAudio(src) {

    // Get the audio element.
    var sound = $("#sound")[0];

    // Apply the new audio source.
    sound.src = src;

    // Load the sound.
    sound.load();

    // Set volume to default.
    sound.volume = 1;

    // Play the sound.
    sound.play();

    return false;
}

音量为 1 是可选的，但如果您已经淡出任何以前的音频（我曾经是这样）并且您想知道为什么没有播放，这很有用！

您的页面上需要有一个音频元素：

<audio id="sound">
    <source id="sound-src" src="" type="audio/mpeg">
</audio>

JS 用法：

playAudio('media/shake.mp3');

目前在 Chrome 版本 93.0.4577.63（官方版本）（64 位）中工作

【讨论】：