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.com/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.
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();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.