在 iframe 中播放的静音音乐？答案

【问题标题】：Mute music played in an iframe?在 iframe 中播放的静音音乐？
【发布时间】：2015-11-17 09:18:40
【问题描述】：

所以我有一个 iframe，它的“src”指向一些音乐的 URL。 iframe 是隐藏的，它会自动播放音乐。如何添加按钮以使音乐静音？

<iframe hidden="true" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
        src="http://urlofmusic"></iframe>

请注意，音乐来自外部网站。此外，该 URL 并不指向特定文件。这只是网站提供的外部链接。

【问题讨论】：

您能否提供您的代码，以便我们查看您在做什么？
是http://urlofmusic 指向某个音频文件吗？ (.mp3) 这个文件和你的页面在同一个服务器上吗？如果这两个条件为真，那么您可以通过document.querySelector('iframe').contentDocument.querySelector('video') 访问它，然后只需将其muted 属性更改为true，如果您只想将其静音甚至调用其pause() 方法。
音乐是通过 HTML5 标记还是通过 Flash 播放的？
那你就完蛋了，唯一的办法就是移除 iframe
@Kaiido 如果您提到的条件属实怎么办？既然是 .mp3 文件，为什么还要使用 querySelector('video')？

标签： javascript html iframe web frontend

【解决方案1】：

您想在音频标签内使用“controls”参数

<audio controls>
<source src="nameofsong.ogg" type="audio/ogg">
<source src="nameofsong.mp3" type="audio/mpeg">
audio tag not supported message optional
</audio>

您可以将文件名替换为 src 中歌曲的 URL

【讨论】：

你可以参考我上面的版本。该网址未指向任何音乐文件。而是外部网站提供的整个 iframe 的地址。

【解决方案2】：

使 iframe 静音的唯一方法是将其从 html 中删除。您可以克隆它以便稍后取消静音。但是你不能暂停和恢复，就像停止和播放一样。
HTML

<div id = "iframe_contain">
    <iframe width="0" height="0" hidden="hidden" id="iframe"
        src="http://www.youtube.com/embed/y6120QOlsfU?autoplay=1&loop=1">
    </iframe>
</div>
<a href="javascript:" id="mute">Mute</a><a href="javascript:" id="unmute">Unmute</a>

(function(){
    $("#mute").click(mute);
    $("#unmute").click(unmute);
    //backup iframe
    var iframe_bk;
    //play status
    var status = 1;
    function mute(){
        if(status!=1) return;
        var iframe = $("#iframe");
        iframe_bk = iframe.clone();
        iframe.remove();
        status = 0;
    }
    function unmute(){
        if(status!=0) return;
        if(iframe_bk){
            $("#iframe_contain").append(iframe_bk);
            iframe_bk = null;
            status = 1;
        }
    }
})();

我在jsfiddle使用jQuery和这里的工作版本

【讨论】：