L'audio HTML5 ne joue pas sur Mobile Chrome (Android)

Question

J'ai un élément HTML5 qui lit un fichier audio intégré lors d'un clic. C'est ce que le code ressemble à:

HTML:

<span class="sound"> 
    <audio id="yourAudio" preload="none" onplay="playing(this);" onended="stopped(this);"> 
     <source src="/sandboxassets/pronunciations/estest106f444b36e7b5fdb88a10706d397dc2.mp3" type="audio/mpeg"> 
    </audio> 
    <a href="javascript:;" id="audioControl" onclick="playclip(this);" title="Hear it spoken"> 
     <i class="fa fa-2x fa-volume-down pronounce"></i> 
    </a> 
</span> 

JS:

// play pronunciation file 
function playclip(mp3){ 
    mp3.parentNode.getElementsByTagName('audio')[0].play(); 
    return false; // Prevent Default Action 
} 
function playing(thisicon){ 
    // var icon = document.getElementsByClassName("pronounce")[0]; 
    var icon = thisicon.parentNode.getElementsByClassName('pronounce')[0]; 
    icon.className = "fa fa-2x fa-volume-up pronounce"; 
} 
function stopped(thisicon){ 
    // var icon = document.getElementsByClassName("pronounce")[0]; 
    var icon = thisicon.parentNode.getElementsByClassName('pronounce')[0]; 
    icon.className = "fa fa-2x fa-volume-down pronounce"; 
} 

Cette configuration fonctionne parfaitement bien dans un bureau au moins les navigateurs: Chrome, Edge, et Opera (encore test sur Safari, IE et Firefox). Cependant, le clic ne fait rien sur Chrome Android. Une idée d'où je pourrais me tromper? Le code est en ligne sur www.peppyburro.com/sandboxdictionary/fugar.

Une question avec exactement le même titre existe ici, mais la solution proposée ne semble pas être ce que je suis à la recherche parce que je n'ai pas explicitement ajouté .htaccess protection par mot de passe sur mon site.

Answer 1

événements tactiles Android et iPhone

touchstart ↔ ↔ mousedown
touchEnd mouseup
touchmove ↔ mousemove
touchcancel

document.getElementById('yourAudio').addEventListener("mouseup", tapOrClick, false); 
document.getElementById('yourAudio').addEventListener("touchend", tapOrClick, false); 

function tapOrClick(e) { 
    var mp3 = e.target; 
     mp3.parentNode.getElementsByTagName('audio')[0].play(); 
}