javascript - 在移动设备上禁用自动播放

Question

我想禁用我网站上音频流的自动播放，问题是移动设备无法自动播放，激活事件的按钮已暂停(就像您正在播放音频一样)。我希望出现播放按钮而不是暂停按钮，我认为最好在移动设备上禁用自动播放。

<script type="text/javascript">
   var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
    audio = new Audio();
    audio.src = "http://listen.streaming";
    audio.loop = true;
    audio.play();
    // Set object references
    playbtn = document.getElementById("playpausebtn");
    // Add Event Handling
    playbtn.addEventListener("click",playPause);
    // Functions
    function playPause(){
        if(audio.paused){
            audio.play();
            playbtn.style.background = "url(pausa-sobre.png) no-repeat";
        } else {
            audio.pause();
            playbtn.style.background = "url(play-sobre.png) no-repeat";
        }
    }

}
window.addEventListener("load", initAudioPlayer);


    </script>

html

<button id="playpausebtn"></button>

CSS

    button{ border:none; cursor:pointer; outline:none; }
button#playpausebtn{
    background:url(pausa-sobre.png) no-repeat;
    width:68px;
    height:68px;
}

Answer 1

一个可能的解决方案是在运行 play() 方法后检查音频的 paused 状态:

• 如果为false:表示音频开始。
• 如果为 true:表示音频没有开始播放(您必须显示播放按钮而不是暂停按钮)

这将是代码(替换正确的图像):

var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
    audio = new Audio();
    audio.src = "http://www.w3schools.com/html/horse.mp3";
    audio.loop = true;
    audio.play();

    // Set object references
    playbtn = document.getElementById("playpausebtn");

    // if it's not playing after calling play(), show the other icon
    if(audio.paused) {
        playbtn.style.background = "url(http://www.clker.com/cliparts/e/5/a/2/1206570547560908424akiross_Audio_Button_Set_4.svg.thumb.png) no-repeat";        
    }

    // Add Event Handling
    playbtn.addEventListener("click",playPause);
    // Functions
    function playPause(){
        if(audio.paused){
            audio.play();
            playbtn.style.background = "url(http://www.clker.com/cliparts/c/e/f/2/1206570536270669982akiross_Audio_Button_Set_1.svg.thumb.png) no-repeat";
        } else {
            audio.pause();
            playbtn.style.background = "url(http://www.clker.com/cliparts/e/5/a/2/1206570547560908424akiross_Audio_Button_Set_4.svg.thumb.png) no-repeat";
        }
    }

}
window.addEventListener("load", initAudioPlayer);

你可以看到它在这个 JSFiddle 上工作:http://jsfiddle.net/LbnLu89d/3/