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

I want to be able to play an audio file from a callback function using javascript and HTML5 elements. From what I've read, the only way that most mobile devices play HTML5 audio is via user interaction (i.e. button click etc).

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

My scenario is slightly different. The button click event makes an ajax call with a callback function, and based on the results returned, a different sound is supposed to be played. This works fine on desktop browsers, however both android and the iPad do not seem to support this.

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

Does anyone know of any workarounds?

有谁知道任何变通方法？

Sample code showing how audio objects are initialised etc:

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

    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();
    }

EDIT: I've solved this problem using a similar solution as outlined below. On the user event I played then immediately paused the sounds. Once the callback returned, I resumed playing the appropriate sound

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

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

3 个解决方案

#1

You might try placing both sounds into a single audio file, and then using the callback to queue up and play at the correct location.

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

Going this route, you can start playing the sound on the initial user click (with empty space at the beginning) and then immediately pause it (from the play event to ensure it began playing). Once the callback comes in, set the currentTime to the place on the audio track you want to play and begin playing. Playing this way should work, because the initial play call occurred on a user action.

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

#2

To extend on Derek's answer, here's the jQuery code to make this happen for a given audio element:

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

<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>

On the button's click event, call the following:

在按钮的单击事件上，调用以下内容：

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

Then in your Ajax done() function you can just play it like you normally would:

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

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

#3

HTML5 audio tag is supported in almost all of the smart phone browsers these days

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

Try

尝试

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

#1