audio 标签加入背景音乐谷歌浏览器不能自动播放的问题(二)

雨点打透心脏的1/2处 2022-12-28 12:44 418阅读 0赞

前面的一篇文章:  [audio 标签加入背景音乐谷歌浏览器不能自动播放的问题][audio]

上面这是之前写过的一篇,但是后来小编发现, 对浏览器兼容性不是很友好, 谷歌浏览器打开, 有时可以自动播放, 有时却又不能自动播放

今天从另外一个角度重新思考; 打开页面后通过单击页面任意空白处来触发播放 ; 废话不在此赘述; 直接上关键代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta http-equiv=Content-Type content="text/html; charset=GB2312">    
<title>audio 标签加入背景音乐单击页面触发播放</title>

<audio  id="touchstart"  src="whys.mp3" controls="controls" autoplay="autoplay" loop="loop" style="display:none;" >  
           Your browser does not support the audio element.  
</audio>  
  
</head>  
<body>  
    <script>  
        function toggleSound() \{  
            var music = document.getElementById("touchstart");   
            if (music.paused) \{   
                music.paused=false;  
                music.play();   
            \}    
        \}  
        setInterval("toggleSound()",1);  
    </script>  
</body>  
</html>

上面代码红色部分, 大家将audio标签src音乐资源切换成自己的路径文件名; 然后小编已经给大家测试了在 谷歌、火狐、360等主流浏览器上面的播放实际情况

*  谷歌浏览器播放情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx_size_16_color_FFFFFF_t_70][]

*  火狐浏览器播放情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx_size_16_color_FFFFFF_t_70 1][]

*   360浏览器播放情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx_size_16_color_FFFFFF_t_70 2][]

实际测试效果都在上面 ; 主流浏览器兼容性良好;

完整版代码点蓝色字体 :  [代码下载][Link 1]

*  到此，本篇博客书写完毕，更多精彩等待后续更新 ,感谢!![format_png][]

![9f3e31538ca5b38a35668bc4b1d784f8.png][]

[audio]: https://blog.csdn.net/qq_35661171/article/details/110665815#comments_14236483
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx_size_16_color_FFFFFF_t_70]: /images/20221120/9dcaf6da22ce4708822a5b9ffa0214dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201217105302550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201217105421817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx,size_16,color_FFFFFF,t_70
[Link 1]: https://download.csdn.net/download/qq_35661171/13710870
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9iOTZDaWJDdDcwaWFhOHI3UEpveUF0bGZIQUtlOFJvc0Uzd1lWS0JhYzU1cDFIUEJKSFpTNDJ5d25HNHlZdEQzam85QTllNWthd0JaczRJRTZSMUM0d2lidy82NDA?x-oss-process=image/format,png
[9f3e31538ca5b38a35668bc4b1d784f8.png]: https://img-blog.csdnimg.cn/img_convert/9f3e31538ca5b38a35668bc4b1d784f8.png