html5 中audio 在safari上不支持自动播放

浏览数：26 / 时间：2015年06月09日

今天做了一个页面，在音频列表上播放音频文件。

效果图如下：

实现原理如下：

function fnPlayAudio(obj, expr) {if(obj.hasClass("icon-play-stop")){
        obj.removeClass("icon-play-stop");
        $("#audioBox").html("");;
    }else{
        expr.removeClass("icon-play-stop");
        obj.addClass("icon-play-stop");
        $("#audioBox").html("").append("<audio controls=‘controls‘ autoplay=‘autoplay‘ height=‘1‘ width=‘1‘ id=‘audioObj‘><source src=‘../images/"+ obj.attr(‘data-src‘)+".mp3‘ type=‘audio/mp3‘/></audio>");
    }
}

注：给audio写上autoplay 为true，以为安枕无忧了，可是在ios上访问的时候，并没有自动播放。

查了资料，html audio 在iPhone，ipd,safari浏览器不能播放是有原因滴
(在safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截

于是采用了更近办法，audio标签append到页面后，执行audio.play();

function fnPlayAudio(obj, expr) {
    var voice = document.getElementById("audioObj");
    if(obj.hasClass("icon-play-stop")){
        obj.removeClass("icon-play-stop");
        $("#audioBox").html("");
        voice.pause();
    }else{
        expr.removeClass("icon-play-stop");
        obj.addClass("icon-play-stop");
        $("#audioBox").html("").append("<audio controls=‘controls‘ autoplay=‘autoplay‘ height=‘1‘ width=‘1‘ id=‘audioObj‘><source src=‘../images/"+ obj.attr(‘data-src‘)+".mp3‘ type=‘audio/mp3‘/></audio>");
        voice.play();
    }
}