在隐藏标签中播放声音答案

【问题标题】：Playing Sound In Hidden Tag在隐藏标签中播放声音
【发布时间】：2013-03-20 20:07:43
【问题描述】：

我正在尝试在网页上设置声音。

我找到了这段代码。当div 可见但我想隐藏并工作时，它是工作代码。在这种情况下，它不起作用，因为它被 style 属性隐藏。如何让它不可见并同时播放声音？

<div style="display:none">
   <embed src="sound.mp3"/> 
</div>

【问题讨论】：

您应该查看 HTML 5 audio 元素。
我试过了，它在隐藏模式下工作。干得好。
我不知道为什么每个人都认为这将被用于邪恶的事情。您可以根据网站上的用户输入动态播放声音，这是完全可以接受的。

标签： html audio

【解决方案1】：

我同意上述 cmets 中的观点 - 这可能很烦人。我们只能希望您为用户提供关闭音乐的选项。

不过……

audio { display:none;}

&lt;audio autoplay="true" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"&gt;

css 隐藏了audio 元素，autoplay="true" 会自动播放它。

【讨论】：

【解决方案2】：

我一直在尝试附加一个应该自动播放并将被隐藏的音频。这很简单。只需几行 HTML 和 CSS。看一下这个！！这是我在正文中使用的一段代码。

<div id="player">
    <audio controls autoplay hidden>
     <source src="file.mp3" type="audio/mpeg">
                unsupported !! 
    </audio>
</div>

【讨论】：

【解决方案3】：

<audio autoplay> <source src="file.mp3" type="audio/mpeg"> </audio>

它会移除自动播放栏，但仍会播放音乐。看不见的声音！

【讨论】：

【解决方案4】：

这就是我实现它的方法，这是不可见的（HORRIBLE SOUND....）

<!-- horrible is your mp3 file name any other supported format.-->
<audio controls autoplay hidden="" src="horrible.mp3" type ="audio/mp3"">your browser does not support Html5</audio>

【讨论】：

【解决方案5】：

audio { display:none;}

&lt;audio autoplay="true" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"&gt;

【讨论】：

【解决方案6】：

<audio id="audio" style="display:none;" src="mp3/Fans-Mi-tooXclusive_com.mp3" controls autoplay loop onloadeddata="setHalfVolume()">

即使系统音量很高，它也会自动播放、隐藏音乐并减少音乐以避免噪音。将其放入脚本中：

<script>
    function setHalfVolume() {
        var myAudio = document.getElementById("audio");
        myAudio.volume = 0.2;
    }
</script>

【讨论】：

【解决方案7】：

我希望人们允许他们关闭诸如音乐之类的东西，至于按钮点击，有时，这些非常酷。使用

<audio controls autoplay hidden="hidden"> <source src="*file here*" type="*file extension (.mp3 .ogg etc.)*">  Your browser does not support the audio element. </audio>

如你所见，我不喜欢重复自己，但我决定使用hidden 标签。

希望这会有所帮助。

【讨论】：

【解决方案8】：

通常，我所做的是放置普通的音频标签，然后放置autoplay="true"，我不添加：controls ="true"，这通常对我有用

我把它放在一个 sn-p 中，还做了一个 jsfiddel here

希望这会有所帮助:)

<audio autoplay="true" 
src="https://res.cloudinary.com/foxyplays989/video/upload/v1558369838/LetsGo.mp3"> 
</audio>

【讨论】：