![](/img/trans.png)
[英]HTML5 audio on android chrome, not playing unless an alert() is called
[英]HTML5 audio not playing on Mobile Chrome (Android)
我有一個 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密碼保護。
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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.