起因:

想给我的个人主页加一个入场音频，但是html的原生标签<audio>貌似没啥用，由于浏览器安全策略的限制，大多数现代浏览器不允许自动播放音频。

于是我就去度娘那咨询了一下，发现可以通过访问者的自助触发行为来播放音频，但是在页面上写个按钮告诉你们:哇~这里有一个播放音频的按钮快来点击吧! 这好像并不现实，于是就想到了之前写的loading加载页的遮罩层...

 

实现过程:

利用三剑客:html css js。

首先加上div标签(加载遮罩层)，audio标签(播放音频)。

 

用css写一个遮罩层覆盖整个页面，背景为半透明黑色，显示一些文本，并设置为可点击，这样在打开页面的时候访问的人就会"无意间"点一下按钮。

再用js把点击后隐藏遮罩层的效果实现出来。

 

完整代码:

<div id="overlay" onclick="playAudio()">
<p>HELLO WORLD</p>
</div>
<audio id="audioElement" src="你的音频地址" type="audio/mpeg" preload="auto"></audio>

 

css:

#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; } #overlay p { color: white; font-size: 20px; text-align: center; }

 

js:

function playAudio() { var audio = document.getElementById('audioElement'); var overlay = document.getElementById('overlay');  audio.play();  overlay.style.display = 'none'; }