简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
android - 安卓手机上html5页面播放音乐为何只能播放一次？
PHP中文网
PHP中文网 2017-04-17 11:24:32
0
2
435

在安卓手机上，打开一个播放音乐的页面，点击播放，第一次点击的时候能够播放，播放完以后再次点击播放却无法播放了，这是什么原因导致的，有什么方法可以解决？

另外同样的页面在ios下面没有问题。

测试用例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>音乐播放器</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
</head>
<body>
<audio id="music" src="http://wtser.u.qiniudn.com/download-complete.wav" preload="auto"></audio>
<button id="bf" onclick="play()">播放</button>
<button id="zt" onclick="pause()">暂停</button>
<script>
    audio = document.getElementById("music");
    document.getElementById("zt").style.display = "none";
    audio.addEventListener("timeupdate", showtime, true);
    function showtime() {
        if (audio.duration == audio.currentTime) {
            document.getElementById("zt").style.display = "none";
            document.getElementById("bf").style.display = "";
            document.getElementById("music").currentTime = 0;
        }
    }
    function play() {
        audio.play();
        document.getElementById("zt").style.display = "";
        document.getElementById("bf").style.display = "none";

    }
    function pause() {
        audio.pause();
        document.getElementById("bf").style.display = "";
        document.getElementById("zt").style.display = "none";
        //document.getElementById("music").currentTime =0;
    }
</script>
</body>
</html>
PHP中文网
PHP中文网

认证高级PHP讲师

répondre à tous(2)
Peter_Zhu
Peter_Zhu2017-04-17 11:26:32 2 plancher

好像是浏览器兼容性的问题。用js 创建audio对象的形式成功实现了点击再次播放。

//onclick do after

myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    /*this.play();*/
}, false);
myAudio.play();
Comme +0
Ajouter une réponse
洪涛
洪涛2017-04-17 11:26:32 1 plancher

检测ended属性，根据currenttime还有durration，等它播放完之后又重新播放

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！