的Ogg文件無法在手機上

Question

打多次，我有一個HTML文件中的多個音頻標籤：

<audio src="/sound/file1.ogg" id="sound" class="file1"></audio> 
<a href="#" data-audio="file1" class="play"> 
<i class="fa fa-volume-up"></i> 
</a> 

<audio src="/sound/file2.ogg" id="sound" class="file2"></audio> 
<a href="#" data-audio="file2" class="play"> 
<i class="fa fa-volume-up"></i> 
</a> 

and so on ... 

播放由下列函數觸發：

$('.play').on('click', function(e){ 
     e.preventDefault(); 
     audioCls = $(this).data('audio'); 
     $('.'+audioCls).trigger('play'); 
    }); 

一切就像在桌面上的魅力瀏覽器。如果您點擊播放按鈕，則每次點擊時都會播放音頻。但在移動設備上，它只播放一次聲音，我無法弄清楚原因。有任何想法嗎？

附註：音頻文件非常小（最大100 kb），只有幾秒鐘的時間。

UPDATE

看來，Android的暫停你玩一次後的文件。您需要從操作系統UI（屏幕上部的通知區域）取消暫停它，以便重放它。

這是某種安全功能嗎？我可以繞過我的響應網站嗎？

Answer 1

完全拋棄<audio>標籤，並尋找更優雅的JS解決方案。

<a href="#" data-audio="file1" class="play"> 
<i class="fa fa-volume-up"></i> 
</a> 

<a href="#" data-audio="file2" class="play"> 
<i class="fa fa-volume-up"></i> 
</a> 

<script> 
function cassettePlay(cassette){ 
    var cassettePlayer = new Audio(""); 
    cassettePlayer.src=cassette; 
    cassettePlayer.pause(); 
    cassettePlayer.load(); 
    cassettePlayer.play(); 
} 

$('.play').on('click', function(e){ 
    e.preventDefault(); 
    var cassette = "/audio/" + $(this).data('audio') + ".ogg"; 
    cassettePlay(cassette); 
}); 
</script> 

它的工作原理！