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
• Firefox、Chrome / Android 4.1、4.3

Answer 1

移动设备需要用户直接的、物理的、同步交互来播放音频或视频。您已经避免了通过要求用户实际单击按钮来尝试在页面加载时播放音频的常见陷阱，但是您通过使用$.getJSON 发出异步请求破坏了同步规则。您偶然发现了“从不使用同步 XHR”规则的唯一个例外。我以前从未推荐过这个，但尝试用这个替换你的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");
        }
    });
}