javascript - HTML5 音频标签无法在移动设备上引发事件 `canplay`

Question

我用 JS 和 HTML5 定制了一个音频播放器。 首先，我做简单的:

  <div id="btnPlayPause" playing="" state=""></div>
  <audio style="display:none;" id="realSounder" preload="meta">
    <source src="" type="audio/mpeg">        
  </audio>

还有 JS:

$("#btnPlayPause").click(function(){
    realSounder = document.getElementById('realSounder');
    realSounder.src = "http://domain.com/aloha.mp3";
    realSounder.play();
});

运行良好。但是当我用UI控件实现时，需要更复杂的代码:

function initPlayer () {
    realSounder = document.getElementById('realSounder');
    realSounder.volume = 0.8;
    subscribe('canplay', realSounder, function() {
         if (realSounder.getAttribute('state') != 'playing')
             realSounder.play();
     });
    subscribe('canplaythrough', realSounder, function() {       
        if (realSounder.getAttribute('state') != 'playing')
            realSounder.play();
    });
}
function subscribe(event, element, func) {
    //addEventListener for cross-browser. 
    if (element.addEventListener) {
        element.addEventListener(event, func, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + event, func);
    } else {
        element['on' + event] = func;
    }
}
$(document).ready(function() {
    initPlayer();
    $("#btnPlayPause").click(function(e) {      
        e.preventDefault();
        //do something for display

        play();
    });
});

function play() {
    var loadUrl = "/wap.php/AjaxLoadAudio";
    var audioId = $("#btnPlayPause").attr('playing'); //get id of audio
    
    $.getJSON(
        loadUrl,
        {audio_id:audioId},
        function(json){
            realSounder.src = json.audio_share_url;
        }
    ).error(function() {
            console.log('Error: 404');
    });    
}

这不起作用。似乎 realSounder 无法引发事件 canplay 或 canplaythrough 来播放声音。为什么？我尝试在 canplay 和 canplaythrough 的处理函数中使用 console.log() 或alert()，但什么也没发生!

注意:

我已经测试了此代码并成功:

• IE11/Windows Phone 8.1
• Android 浏览器/Android 4.1、4.3

并且失败:

• Safari/iPhone 4、4S
• 火狐浏览器、Chrome/Android 4.1、4.3

Answer 1

移动设备需要用户直接、物理、同步交互才能播放音频或视频。通过要求用户实际单击按钮，您避免了尝试在页面加载时播放音频的常见陷阱，但通过使用 $.getJSON 发出异步请求，您打破了同步规则。您偶然发现了“从不使用同步 XHR”规则的唯一异常(exception)情况之一。我以前从未推荐过此操作，但请尝试用此替换您的 play() 函数:

function play() {
    var audioId = $("#btnPlayPause").attr('playing'); //get id of audio

    $.ajax({
        url:"/wap.php/AjaxLoadAudio"
        data: { audio_id: audioId },
        dataType: "json",
        async: false,
        success: function(response){
            realSounder.src = response.audio_share_url;
        },
        error: function() {
            console.log("Error");
        }
    });
}