通过localStorage 实现 音乐播放器页面切换继续播放

1,033 阅读1分钟

写音乐播放器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))
    })
})()