Ogg-Datei nicht mehrfach auf mobilen

Question

Ich habe mehrere Audio-Tags in einer HTML-Datei zu spielen:

<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 ... 

Wiedergabe durch die folgende Funktion ausgelöst wird:

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

Alles wirkt wie ein Zauber auf dem Desktop Browser. Wenn Sie auf die Wiedergabetaste klicken, wird jedes Mal, wenn Sie darauf klicken, das Audio abgespielt. Auf Mobilgeräten spielt es jedoch nur einmal und ich kann nicht verstehen warum. Irgendwelche Ideen?

Als Randnotiz: Die Audiodateien sind extrem klein (100 kb max) und nur ein paar Sekunden lang.

UPDATE

Es scheint, dass Android die Datei pausiert, nachdem Sie es einmal spielen. Sie müssen es über die OS-Benutzeroberfläche (Benachrichtigungsbereich im oberen Teil des Bildschirms) wieder aktivieren, um es wiederzugeben.

Ist das eine Art Sicherheitsmerkmal? Kann ich es von meiner Responsive Website umgehen?

Answer 1

Beendete den <audio> Tag zusammen und geht für eine elegantere JS Lösung.

<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> 

Es funktioniert!