Chrome浏览器的音频自动播放问题

今天做一个网页播放音频的测试,需要自动播放背景音乐,代码如下:

        
            Your browser does not support the audio element.
        

可是我无论怎么设置,打开后界面都无法正常播放,都需要我手动点那个播放按钮才能播放,我需要的是自动播放啊。

Chrome浏览器的音频自动播放问题

难道是Chrome浏览器不支持自动播放了吗?可是当我在其他网站上找到了一个示例,运行示例的时候,它的自动播放却是没有任何问题的。

Chrome浏览器的音频自动播放问题

只要一点那个运行代码的按钮,就自动播放了,我的却不行,这是怎么回事呢?

自动播放不行,那我试下用JS定时控制播放器手动播放。

        function toggleSound() {
            var music = document.getElementById("myAudio");//获取ID  
            console.log(music);
            console.log(music.paused);
            if (music.paused) { //判读是否播放  
                music.paused = false;
                music.play(); //没有就播放 
            }
        }

        setInterval("toggleSound()", 1);

通过输出日志发现了问题的关键点:

Chrome浏览器的音频自动播放问题

play() failed because the user didn't interact with the document first.

翻译过来,意思是用户还没有跟浏览器进行交互。然后我尝试在浏览器中随便点了一下,就自动播放了。

然后到网上核实了一下资料,确实是Chrome对此改变了规则:如果用户没有任何交互操作,那就不自动播放。这样改动的目的主要是防止扰民,想想夜深人静的时刻,随便打开一个网页,然后就自动播放一个声音,确实挺吓人的;还有如果同时打开了很多网页,每个网页都自动播放声音,会很乱,用户跟哪个页面交互了再播放哪个页面的声音,这样确实是提升了用户体验。

明白了道理,也就不纠结。想让它播放,就随便点下页面任何位置就可以了。

展开阅读全文

页面更新:2024-03-14

标签:浏览器   目的   示例   夜深人静   吓人   背景音乐   按钮   界面   随便   确实   音频   声音   代码   页面   网页   用户   科技

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top