6

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

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

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

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

所以,最大的问题是,知道为什么这不起作用吗?

** 编辑 ** 我知道一次只能播放一个文件,这就是我在这里要做的。项目(在功能上)类似于电话服务,您有 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>
4

2 回答 2

7

现在,Android 上的 Chrome 明确需要用户通过手势“调用”播放来播放音频。有人担心移动设备带宽过载或创建仅播放音频的烦人弹出窗口 - 这是默认禁用它的原因之一。

我们正在考虑改变这一点,如果您在 Android 上使用 Chrome 的 Beta 版,您可以转到此链接chrome://flags/#disable-gesture-requirement-for-media-playback,它可以让您切换此行为。我们正在解决这个问题,您可以在Bug 160536上关注它

于 2013-06-10T13:08:49.227 回答
2

方法 1、2 和 3 不适用于 iOS。不幸的是,大多数移动设备将 HTML5 音频限制为一次播放的单个源。iOS 需要用户交互来启动任何媒体播放(onload 不计算在内)。

于 2013-06-09T00:14:02.663 回答