Question

我想将背景音乐放到网站上，并通过自定义的botton暂停/播放音乐。首先，我使用了<audio>，但是Chrome不允许自动播放。因此，现在我结合<audio>和<iframe>来使音乐自动播放。但是我不知道如何通过<iframe>暂停/播放音乐。这是我的代码。

<script>
    var musicIframe = document.getElementById("iframeAudio");
    var musicAudio = document.getElementById("audioAudio");
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    if (!isChrome) {
        $('#iframeAudio').remove();
        $("#music__btn--id").click(function() {
            if (musicAudio.paused) {
                musicAudio.play();
                $("#music__btn--id").removeClass("music__pause").addClass("play"); // change to the play button
            } else {
                musicAudio.pause();
                $("#music__btn--id").removeClass("play").addClass("music__pause"); // change to the pause button
            }
        });
    } else {
        $('#audioAudio').remove();
        $("#music__btn--id").click(function() {
            if (musicIframe.paused) {
                $("#iframeAudio").attr("src", "./images/music.mp3");
                $("#music__btn--id").removeClass("music__pause").addClass("play"); // change to the play button

            } else {
                $("#iframeAudio").removeAttr("src");
                $("#music__btn--id").removeClass("play").addClass("music__pause"); // change to the pause button

            }
        });
    }
    </script>

<div class="music">
        <a class="music__btn" id="music__btn--id"></a>
        <iframe id="iframeAudio" src="./images/music.mp3" allow="autoplay" style="display:none"></iframe> 
        <audio id="audioAudio" src="./images/music.mp3" autoplay="autoplay" loop="loop"></audio>
    </div>

当我使用IE打开页面时，它会显示一个小的播放器窗口，如何禁用它？

暂停iframe中的音频

0 个答案: