Javascript HTML5音频标签无法在手机上引发事件“canplay”

我是用JS和HTML5定制的音频播放器。 首先，我做的很简单：

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

它运行良好。但当我使用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

的处理程序函数中控制台.log（）或alert（），但什么也没发生

注意: 我已经在以下方面测试了此代码并成功：

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

和失败打开：

• Safari/iPhone4，4S
• Firefox、Chrome/Android 4.1、4.3

---

移动设备需要用户直接、物理、同步的交互才能播放音频或视频。通过要求用户实际单击按钮，您避免了在页面加载时播放音频的常见陷阱，但通过使用

$.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");
        }
    });
}

---

非常感谢你！我明白了！有没有办法让音频元素对音频进行排队，以便在实际播放之前没有延迟？在Android上，我设置音频元素的src属性，然后等待“canplay”事件，然后再启用播放按钮。对于iOS，似乎只有在调用play（）之后才会发出“canplay”。这对我来说没有多大意义，tbh，所以我想知道我是不是出了什么问题。所以，这和“canplay”无关？在我看来，这里的问题更多地与用户交互和对“play（）”的调用之间的断开有关——即单击->ajax==/==canplay->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");
        }
    });
}