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

今天做了一個頁面，在音頻列表上播放音頻文件。

效果圖如下：

實現原理如下：

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