实现chrome浏览器内核自动播放功能-突破浏览器限制

m0_67682227

已于 2023-10-07 19:41:57 修改

阅读量1.3k

点赞数 1

文章标签： chrome 前端 html5 音频音视频

于 2023-10-07 19:41:41 首次发布

本文链接：https://blog.csdn.net/m0_67682227/article/details/133652955

版权

在chrome浏览器内核中在chrome66版本后无法实现自动播放，现在我给大家一个全网独一份的解决方案。

首先我们来到W3C手册中

很多人可能会有所疑惑，上面明明有个autoplay属性，写的明明也很清楚描述上写着如果出现该属性则音频在就绪后马上播放，就绪是什么概念就绪就是你进入网页之后或者说这个音频它加。谷歌从chrome66版本中就禁用了这个属性让他直接播放。

我们一般想让他自动播放的都是采用两个办法,有些冷门的方法可以自己去查w3c。

首先要么你是你的媒体，参与指数达到一定的阈值，它才可以让你自动播放，就是如果用户每一次进入你的网页，它都会手动点击一次打开，就像你刷抖音，刚开始进去时你会发现他要你手动点击播放它才会播放到后来你就发现你每次进入这个网页它都会自动帮你点你点。

还有一个办法呢就是用户触发播放事件，播放事件是个什么东西啊就相当于你点击了那个播放按钮，但是我们播放按钮的样式是可以变的，你是可以重新创建一个按钮来播放的，就是说我把原有的audio标签给他隐藏掉在新建一个button或div当用户触发这个元素时，播放音乐。

这期咱主要用的就是第二个办法，但是咱不可以直接用第二个办法，咱要剑走偏锋。我是用让它自动播放，肯定不能让用户手动点击啊。

所以我就想出了一个主意，首先你创建一个div元素，你将它的透明度设为0.001众所周知在css中透明度呢是0到1之间0是完全透明1是不透明。当然你也可以用其他任何办法，只要让用户看不见，我只能看不见，是从感官上看不见。然后你可能会说我就创建一个元素，怎么让它自动播放呢？非常简单咱用js来监听他的事件，咱继续来到w3c。

鼠标事件（Mouse Events）：例如鼠标点击（click）、双击（dblclick）、按下（mousedown）、抬起（mouseup）、移动（mousemove）等。

键盘事件（Keyboard Events）：例如键盘按下（keydown）、松开（keyup）、输入（keypress）等。

表单事件（Form Events）：例如表单提交（submit）、输入改变（change）、焦点获取（focus）等。

文档加载事件（Document Loading Events）：例如文档加载完成（DOMContentLoaded）、窗口加载完成（load）等。

触摸事件（Touch Events）：例如触摸开始（touchstart）、触摸结束（touchend）、滑动（touchmove）等。

CSS动画和过渡事件（CSS Animation and Transition Events）：例如动画开始（animationstart）、过渡开始（transitionstart）等。

多媒体事件（Media Events）：例如音频播放（play）、暂停（pause）、视频结束（ended）等。

拖放事件（Drag and Drop Events）：例如元素拖动开始（dragstart）、元素被拖入目标区域（dragenter）、元素离开目标区域（dragleave）等。

网络事件（Network Events）：例如网络请求开始（loadstart）、请求成功（load）、请求失败（error）等。

上面的是一些常用的js监听事件，Js监听事件是不受限制的，但用户只要做出任何操作就能被事件监听给监听到，你鼠标只要动一下，松开一下，这个音乐就开始放了，如果你进入一个网页，你什么事都不干，那么就说明现在这个网页你不使用，可能用户只是在浏览器中不小心点错了，那么你播放音频视频那纯属扰民啊！

<!DOCTYPE html>
<html>
<head>
  <title>音频播放器</title>
</head>
<body>
 
<button id="play-btn">播放音频</button>
 
<audio id="audio">
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
 
<script>
  var audio = document.getElementById("audio");
  var playBtn = document.getElementById("play-btn");
 
  // 定义触发事件列表
  var events = [
    "click",   // 点击事件
    "mouseover",   // 鼠标悬停事件
    "keydown",   // 键盘按下事件
    // 添加其他你想监听的事件...
  ];
 
  // 绑定事件监听器
  events.forEach(function(event) {
    playBtn.addEventListener(event, function() {
      audio.play();
    });
  });
</script>
 
</body>
</html>

我也奉上了我写的代码，你想用js写多少个监听事件都可以，所以啊在用你这个网站的用户进你网站是动都不敢动啊，只要一动就开始播放音乐。

在上面的代码中，我们创建了一个按钮和一个音频元素，并给它们分别设置了ID属性。然后，我们定义了一个事件列表 events，包含了我们希望触发音频播放的各种事件类型。接下来，通过循环遍历事件列表，并使用 addEventListener 方法绑定事件监听器。当任何一个事件被触发时，会调用 audio.play() 方法来播放音频。

请注意，在这个示例中，我只提供了几个常见的事件类型作为示范，你可以根据自己的需求添加其他事件类型。另外，需要将音频文件 audio.mp3 替换为你的实际音频名称。

总之咱本次音频自动播放的原理就是写一个透明元素，用户看不到，但是它会监听用户各种事件，只要一旦触发事件就会自动播放音频，以达到一个用户感观上的自动播放音频也是目前我所知最好的自动播放背景音乐，自动播放音频比较好的一个解决办法。