HTML5音频标签无法在移动设备上引发事件“ canplay”

Question

I'm custom an audio player with JS and HTML5. The first, I do simple with:

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

And JS:

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

It runs well. But when I implement with UI control, need more complex code:

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');
    });    
}

It doesn't works. It's seem tobe realSounder cannot raise event canplay or canplaythrough to play sound. Why? I'm try to console.log() or alert() in handler function at canplay and canplaythrough but nothing happend!

NOTICE:

I have tested this code and success on:

• IE11 / Windows Phone 8.1
• Android Browser / Android 4.1,4.3

And Fail on:

• Safari / iPhone 4, 4S
• Firefox, Chrome / Android 4.1,4.3

Answer 1

Mobile devices require direct, physical, synchronous interaction from the user to play audio or video. You've avoided the common pitfall of trying to play audio on page load by requiring the user to actually click a button, but you've broken the synchronous rule by making an asynchronous request with $.getJSON . You have stumbled across one of the only exceptions to the " never use synchronous XHRs " rule. I have never recommended this before, but try replacing your play() function with this:

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