Question

我正在尝试编写一个可以在移动设备和桌面浏览器上使用的RIA。这个应用程序的一个主要目标是播放声音。可能有很多X（截至目前，有150 +）

在某个用户操作上，我想创建一个新的音频对象，加载某个剪辑并播放它。理想情况下，我会创建一个新的'Audio'对象，设置src等待加载然后播放。这适用于各种桌面浏览器，但在Android 4.2，Chrome和股票浏览器上似乎都失败了。

我尝试了4种不同的音频方式：

包含（在html中）只是一个音频块，让它在运行时加载并调用.play（）;但这有效，这意味着我必须创建150多个音频块。（这无处不在）
创建一个新的'Audio'实例并动态设置.src属性，然后在loadcomplete上调用.play（）（这似乎仅适用于桌面浏览器，而不适用于我的手机）
使用jQuery创建新的音频标签，添加到dom，等待加载然后播放（这似乎仅适用于桌面浏览器，而不适用于我的手机）
在html中添加音频标签，告诉它不加载，等待用户交互，然后加载，等待它准备好，然后播放（这适用于所有地方）。

所以，最大的问题是，任何想法为什么这不起作用？

**编辑** 我知道一次只能播放一个文件，这就是我在这里要做的。项目（功能上）类似于电话服务，你有1人记录数字0 - 9，然后它'说'电话号码'5'。'5'。'5'。'0'。'1 '.....等所以一次输出1个音频流是完全可以接受的...这只是让它发挥作用的问题。

截至目前，我有以下代码，也可以找到here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    var $a1, $a2, $a3, $a4;
    $(document).ready( function(){
        _setupVars();
        _addListeners();
    })

    function _setupVars(){
        $a1 = $( "#audio1");
        $a2 = $( "#audio2");
        $a3 = $( "#audio3");
        $a4 = $( "#audio4");
    }

    function _addListeners(){
        $a1.click( _handleAudio1 );
        $a2.click( _handleAudio2 );
        $a3.click( _handleAudio3 );
        $a4.click( _handleAudio4 );
    }

    function _handleAudio1 (){
        $("#america")[0].play();
    }

    function _handleAudio2 (){
        var a = new Audio();

        $(a).on("canplay", function(){
            a.play();
        })

        if(a.canPlayType("audio/mp3"))
            a.src = "audio/test2.mp3";
        else if(a.canPlayType("audio/ogg"))
            a.src = "audio/test2.ogg";
    }

    function _handleAudio3 (){
        var $x = $('<audio id="says">'+
                '<source src="audio/test3.mp3">'+
                '<source src="audio/test3.ogg">'+
                '</audio>');
        $x.on("canplay", function(){
            $x[0].play();
        })
        $("#audioCont").append($x);
    }

    function _handleAudio4(){
        var $x =$("#cat");
        $x.on("canplay", function(){
            $x[0].play();
        })
        $x[0].load();
    }

</script>
</head>
<body>
    <input type="button" id="audio1" value="play Audio Tag"/><br />
    <input type="button" id="audio2" value="play audio object"/><br />
    <input type="button" id="audio3" value="play dynamic Audio Tag"/><br />
    <input type="button" id="audio4" value="play load Audio Tag, then play"/><br />
    <audio id="america">
        <source src="audio/test1.mp3">
        <source src="audio/test1.ogg">
    </audio>
    <audio id="cat">
        <source src="audio/test4.mp3">
        <source src="audio/test4.ogg">
    </audio>

</body>
</html>

Answer 1

目前，Android上的Chrome显然需要用户通过手势“调用”播放来播放音频。有人担心移动设备带宽过载或者只是播放播放音频的烦人弹出窗口 - 这是默认情况下禁用它的原因之一。

我们正在考虑更改此内容，如果您使用的是Android上的Chrome测试版，则可以转到此链接chrome://flags/#disable-gesture-requirement-for-media-playback，它会让您切换此行为。我们正在解决此问题，您可以在Bug 160536

上关注该问题

Answer 2

方法1,2和＆amp; 3将无法在iOS上运行。不幸的是，大多数移动设备将HTML5音频限制为一次播放的单个源。 iOS需要用户交互才能启动任何媒体播放（onload不计算在内）。

动态创建的音频对象无法在Android Chrome浏览器中播放

2 个答案: