kingwbs 2019-07-01
也许很多前端遇到过这个需求:消息提醒。
一般来说,可以简单的实现绝不会用复杂的方式,audio标签提供了这个功能。
但是,新版的chrome浏览器禁止了js自动播放音频的功能,见鬼了。
<audio src="../audio.mp3" id="myaudio" class="hide"></audio> <script> var audio = document.getElementById('myaudio'); audio.play(); </script>
这是最简单的音频播放脚本,但是在chrome下,抛出异常:Uncaught (in promise) DOMException
,原因是这种操作必须由用户发起。当然,这不是特例,像F11全屏操作,浏览器也是禁止脚本操作的。
但是我们有这个需求,怎么破?
能否不操作play呢?
chrome不仅禁止了脚本自动调用play,还禁止了audio的autoplay属性。
但是,如果音频是静音状态,autoplay属性还是可以生效的。意思是,你可以播放,但是不能干扰用户的视听。
这就给我们提供了一个hack的方法:
默认开启音频的静音播放,而且是循环播放,当我们需要提醒用户的时候,把声音打开,播放时间设置为0秒,播放完毕,关掉声音,继续循环。
是的,音频一直在播放,但是用户听不见。只有我们想让用户听见的时候才能听见,客观上也能实现需求。
<audio src="../audio.mp3" muted autoplay loop id="myaudio" style="display: none"></audio> <script> /* * muted 静音 * autoplay 自动播放 * loop 循环播放 */ var audio = document.getElementById('myaudio'); var t1 = 3e3;//如果是轮询,这个时间必须大于音频的长度。如果是webscoket,应该设置一个状态play,避免重复播放,如下: var t2 = 2500;//音频的长度,确保能够完整的播放给用户 var play = false; function run(){ if(play){ return false; } audio.currentTime = 0;//设置播放的音频的起始时间 audio.volume = 0.5;//设置音频的声音大小 audio.muted = false;//关闭静音状态 play = true; setTimeout(function(){ play = false; audio.muted = true;//播放完毕,开启静音状态 },t2); } setInterval(function(){ run();//假装在轮询服务器,或者从websocket拉取数据 },t1); </script>
这个方法经过在chrome上的实测,可以使用。
但是其他浏览器未做测试,据说有的浏览器,似乎是IE不支持muted属性,限于操作系统,没做测试,如果在IE运行有问题,可以给我提个醒。
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q
示例一和示例二 参考尚硅谷老师的视频教程;window.AudioContext){alert("当前浏览器不支持哟!DOCTYPE html><html><head><meta charset="U
doctype html> HTML5使用UTF-8编码演示:。<meta charset="UTF-8">2.HTML5中如何嵌入音频?</audio>3.HTML5中如何嵌入视频?</video&
<section>跟<div>类似,也是默认换行。html5form表单新增的属性。html5input:不支持的浏览器就是普通的文本输入框text. <inputtype="search"/>输入搜