I have an HTML5 element that plays an embedded audio file upon click. This is what the code looks like:

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";
}

This setup works perfectly fine in at least desktops browsers: Chrome, Edge, and Opera (yet to test on Safari, IE, and Firefox). However, the click does nothing on Chrome Android. Any idea where I could be going wrong with this? The code is live at www.peppyburro/sandboxdictionary/fugar.

A question with the exact same title exists here but the provided solution doesn't seem to be what I'm looking for because I have not explicitly added .htaccess password protection on my site.

I have an HTML5 element that plays an embedded audio file upon click. This is what the code looks like:

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";
}

This setup works perfectly fine in at least desktops browsers: Chrome, Edge, and Opera (yet to test on Safari, IE, and Firefox). However, the click does nothing on Chrome Android. Any idea where I could be going wrong with this? The code is live at www.peppyburro./sandboxdictionary/fugar.

A question with the exact same title exists here but the provided solution doesn't seem to be what I'm looking for because I have not explicitly added .htaccess password protection on my site.

• javascript
• google-chrome
• html5-audio

• Of course it's being called. That's how it's working in desktop browsers. – TheLearner Commented Jan 6, 2017 at 7:15

1 Answer 1

Android and iPhone touch events

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