Question

我希望能够使用javascript和HTML5元素从回调函数播放音频文件。根据我的阅读，大多数移动设备播放HTML5音频的唯一方法是通过用户交互（即按钮点击等）。

我的情景略有不同。按钮单击事件使用回调函数进行ajax调用，并根据返回的结果，应该播放不同的声音。这在桌面浏览器上运行良好，但Android和iPad似乎都不支持这一点。

有没有人知道任何变通办法？

示例代码显示如何初始化音频对象：

    var sound = new Audio('Sample.wav');
    var sound2 = new Audio('Sample2.wav');

/// Button events etc here, stock standard stuff

    function MyCallBack(e)
    {
      if(e.someValue)
       sound.play();
      else
       sound2.play();
    }

修改我已经使用下面概述的类似解决方案解决了这个问题。在我播放的用户事件上，然后立即暂停声音。一旦回调回来，我就恢复播放适当的声音

 hit.play(); hit.pause(); fail.play(); fail.pause();

Answer 1

您可以尝试将两种声音放入一个音频文件中，然后使用回调排队并在正确的位置播放。

走这条路线，您可以在初始用户点击（开头有空格）时开始播放声音，然后立即暂停（从播放事件开始播放确保它开始播放）。回调进入后，将currentTime设置为您要播放的音轨上的位置并开始播放。以这种方式播放应该有效，因为初始播放呼叫发生在用户操作上。

Answer 2

为了扩展Derek的答案，这里是jQuery代码，可以为给定的audio元素实现这一点：

<audio preload="auto" id="yourHTMLaudio">
    <source src="/sounds/youraudio.ogg" type="audio/ogg">
    <source src="/sounds/youraudio.mp3" type="audio/mpeg">
    <source src="/sounds/youraudio.wav" type="audio/wav">
</audio>

在按钮的click事件中，请调用以下内容：

$("#yourbutton").on("click", function() {
    ...
    $("#yourHTMLaudio").trigger('play').trigger('pause').prop("currentTime", 0);
    ...

然后在您的Ajax done()函数中，您可以像平常一样播放它：

    ...
    $.ajax({
        ...
    }).done(function(msg) {
        ...
        $("#yourHTMLaudio").trigger('play');
        ...
    });
    ...
});

Answer 3

目前几乎所有的智能手机浏览器都支持HTML5音频标签

尝试

    <audio autoplay="autoplay" controls="controls">  
       <source src="music.ogg" />  
       <source src="music.mp3" />  
    </audio>

从回调播放移动设备的HTML5音频

3 个答案: