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

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

注意：

1 个答案: