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

Question

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

who*_*mba 6 javascript android google-chrome html5-audio

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

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

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

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

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

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

截至目前,我有以下代码,也可以在这里找到

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Kin*_*lan 7

现在,Android上的Chrome显然需要用户通过手势"调用"播放来播放音频.有人担心移动设备带宽过载或创建只播放音频的烦人弹出窗口 - 这是默认情况下禁用它的原因之一.

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

Answer 2

idb*_*old 2

方法 1、2 和 3 在 iOS 上不起作用。遗憾的是，大多数移动设备将 HTML5 音频限制为一次只能播放一个源。iOS 需要用户交互来启动任何媒体播放（onload 不算）。

归档时间：	12 年，3 月前
查看次数：	6136 次
最近记录：	12 年，1 月前