写音乐播放器demo时,在浏览器中进行页面切换时,发现页面切换后音乐暂停播放;各种百度。最后发现代码没有问题,问题再谷歌浏览器的设置上
解决办法:
打开谷歌浏览器地址栏输入chrome://flags/
在出现的搜索框内输入 AutoPlay
找到Autoplay policy 他的默认值是 default 修改为 : No user gesture is required
点击保存 右下角 Relaunch Now
附上简易js代码
(function () {
/* 创建audio标签的父级 */
let top = document.querySelector('.top'),
/* 创建音频标签*/
audio = document.createElement('audio'),
source = document.createElement('source'),
/*设置音频文件路径*/
url = "./audio/梁静茹-分手快乐.flac"
/*如果缓存内没有音频文件则添加*/
if (localStorage.getItem("temp") == undefined) localStorage.setItem("temp", url)
/*如果缓存内的播放时间不为0则更改当前播放时间*/
if (localStorage.getItem("time") !== "0") audio.currentTime = localStorage.getItem("time")
/*设置音频文件路径*/
source.src = localStorage.getItem("temp")
/*设置自动播放 */
audio.autoplay = "autoplay"
audio.preload = "preload"
/*设置显示音频标签 */
audio.controls = "controls"
/*设置循环播放 */
audio.loop = "loop"
/*添加音频标签*/
top.appendChild(audio)
audio.append(source)
/*监听音频当前时间 */
audio.addEventListener("timeupdate", function () {
/*将当前播放时间添加到缓存 */
localStorage.setItem("time", Math.floor(audio.currentTime))
})
})()