移动 Chrome (Android) 上未播放 HTML5 音频

Question

我有一个 HTML5 单击时播放嵌入音频文件的元素。 这是代码的样子：

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

此设置至少在桌面浏览器中运行良好：Chrome、Edge 和 Opera（尚未在 Safari、IE 和 Firefox 上进行测试）。 但是，点击在 Chrome Android 上没有任何作用。 知道我可能哪里出错了吗？ 该代码位于 www.peppyburro.com/sandboxdictionary/fugar。

这里存在一个标题完全相同的问题，但提供的解决方案似乎不是我要找的，因为我没有在我的网站上明确添加.htaccess密码保护。

Answer 1

Android 和 iPhone 触摸事件

触摸开始 ↔ 鼠标按下
触摸端 ↔ mouseup
触摸移动 ↔ 鼠标移动
触摸取消

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