您现在的位置是:首页 > 正文

audio解决不能自动播放问题

2024-04-01 00:12:17阅读 5

问题描述

无法实现打开网页就能自动播放音乐

正常情况下使用autoplay即可实现自动播放,但是现在打开网页该参数无效


原因分析:

根据最新的规范,Chrome系浏览器,没有交互过的网站默认禁止自动播放,所以现在使用autoplay,打开网页无法实现自动播放.


解决方案:

html部分

<audio src="1.mp3" id="audios" autoplay preload controls></audio>

js部分

var audio = document.getElementById('audios');
function audioAutoPlay(audio){
	play = function(){
		audio.play();
		document.removeEventListener("touchstart",play, false);
	};

	audio.play();
	document.addEventListener("WeixinJSBridgeReady", function () {
		play();
	}, false);

	document.addEventListener('YixinJSBridgeReady', function() {
		play();
	}, false);

	document.addEventListener("touchstart",play, false);
}

//每隔2秒检测是否播放音乐,播放则停止定时器
let t = setInterval(() => {
	if(audio.paused === false){
		console.log('停止定时器');
		clearInterval(t);
	}else{
		console.log('执行定时器');
		audioAutoPlay(audio);
	}
},2000);

网站文章

  • BugKu MISC 就五层你能解开吗?

    BugKu MISC 就五层你能解开吗?

    题目名称:就五层你能解开吗BugKu。

    2024-04-01 00:11:47
  • 【CV作业03】图像平滑+锐化处理

    【CV作业03】图像平滑+锐化处理

    【代码】【CV作业03】图像平滑+锐化处理。

    2024-04-01 00:11:43
  • 使用Apache服务器部署python web过程中遇到的问题及解决方法

    使用Apache服务器部署python web过程中遇到的问题及解决方法

    1. 浏览器提示Internal Server Error 分析:查看Apache错误日志。日志提示:IndentationError: expected an indented block\r,即程...

    2024-04-01 00:11:36
  • 基于 Redis 实现分布式应用限流

    基于 Redis 实现分布式应用限流

    原文链接:http://xiaoqiangge.com/aritcle/1513004492550.html 限流的目的是通过对并发访问/请求进行限速或者一个时间窗口内的的请求进行限速来保护系统,一旦达到限制速率则可以拒绝服务。 前几天在DD的公众号,看了一篇关于使用 瓜娃 实现单应用限流的方案,参考《redis in action》 实现了一个jedis版本的,都属于业务层次限制。 实际场景中

    2024-04-01 00:11:11
  • Spring Boot系列八 spring boot集成jsp、restful接口、springmvc基本功能

    本文介绍spring boot里的spring mvc部分的用法,主要包括如下:- 1 实现 spring boot 集成jsp: @Controller+ @RequestMapping- 2 模拟登录功能: ModelAndView- 3 spring boot 实现restful接口:@RestController

    2024-04-01 00:11:04
  • databinding的简单使用步骤

    1.开启databindingandroid { //在 app 的 build.grandle 中添加开启配置 dataBinding { enabled = true }}2、创建实体public class User { public String name; public User(String name) { this...

    2024-04-01 00:10:57
  • ESP32 Arduino (十) HTTPClient库

    ESP32 Arduino (十) HTTPClient库

    很多时候我们需要ESP32去访问外网的服务器获取一些网络资源,HTTP服务器是最常见的服务器,在这个时候就需要ESP32作为HTTPClient使用,HttpClient是Apache中的一个开源的项...

    2024-04-01 00:10:33
  • 打印机文件服务器主机,打印机服务器主机名称是什么原因

    打印机文件服务器主机,打印机服务器主机名称是什么原因

    打印机服务器主机名称是什么原因 内容精选换一换成为进阶Linux大佬的第一步一、操作系统1、操作系统为接口的示意图2、不同领域的主流操作系统桌面操作系统服务器操作系统嵌入式操作系统移动设备操作系统 3...

    2024-04-01 00:10:20
  • Vue组件化学习之scoped

    Vue组件化学习之scoped

    简介主要介绍scoped的作用。先弄一个案例:main.js://引入vue依赖import Vue from 'vue'//引入组件Appimport App from './App.vue'// ...

    2024-04-01 00:10:14
  • JS判断是否为base64字符串&如何转换为图片src格式

    JS判断是否为base64字符串&如何转换为图片src格式

    JS判断是否为base64字符串&如何转换为图片src格式需求背景 :如何判断后端给返回的 字符串 是否为 base-64 位 呢 ?以及如果判断为是的话,如何给它进行转换为 img 标签可使用的那种 src 格式 呢 ?

    2024-04-01 00:09:44