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

向右看齐 2022-12-26 10:22 548阅读 0赞

在网上查阅相关资料才知道原来在4月份谷歌浏览器做了改革，不支持自动播放了，现贴出解决方案：

由于audio.play()必须要在交互事件中才能使用，因此在项目中，我的解决方案是当用户触发滑动事件时，audio自动播放, 具体实现代码如下:

项目部署在tomcat服务器上, 重启tomcat服务器 ,进入到tomcat 执行命令的bin目录下

cd /usr/local/java/tomcat8/bin/ (这个每个人的目录路径不太一样, 大家切换到自己的目录下就好)

重启tomcat 输入命令: ./startup.sh

等待成功启动后, 浏览器输入访问地址:http://152.136.114.31:8888 (具体大家访问自己的项目地址即可)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx_size_16_color_FFFFFF_t_70][]

完整代码如下:

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>爱不问归期</title>

<audio id="myaudio"   src="whys.mp3" autoplay="autoplay" loop="loop" style="display:none;">  
      Your browser does not support the audio element.  
</audio>  
<script type="text/javascript"   src="js/jquery-1.12.4.min.js"></script>  
      
</head>  
<body>

大家只需看红色部分关键代码即可! 有些问题, 就谷歌浏览器而言, 打开页面有时能自动播放, 但是有时又不行, 小编改变了策略, 页面打开鼠标单击页面任意空白地方触发播放; 详情请点击查看:  [详情请点击此处查看][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjYxMTcx_size_16_color_FFFFFF_t_70]: /images/20221120/6e987c947a0848f4b490ae5be21a1987.png
[Link 1]: https://hellowordjava.blog.csdn.net/article/details/111309823