h5背景音乐播放代码

ios下音乐不会自动播放，需要手动触发才会播放。但是在微信环境下可以做到自动播放。所以我们可以用下面的代码来实现兼容性自动播放。

//背景音乐开始
//添加一个音乐标签
let el_audio = new Audio();
window.el_audio = el_audio;
//把音乐源文件加入到标签上
el_audio.setAttribute("src", require("./audio/BG.mp3"));
//开启循环播放
el_audio.loop = true;
//设置一个音乐图标
let el_play = document.createElement("img");
el_play.classList.add("music");
el_play.setAttribute("src", require("./images/music.png"));
//监听触摸事件并播放音乐
el_play.addEventListener("touchstart", play);
document.body.appendChild(el_play);function play(e) {//去掉冒泡if (!!e) {e.stopPropagation && e.stopPropagation();e.preventDefault && e.preventDefault();}//如果开始播放，先停止document监听触摸事件，避免重复触发document.removeEventListener('touchstart', play);//如果音乐在播放，则暂停（音乐图标样式也去掉play），否则就播放。图标样式加上playif (!el_audio.paused) {el_audio.pause();el_play.classList.remove("play");} else {el_audio.play();el_play.classList.add("play");}
}
try {
//微信环境下就自动播放document.addEventListener("WeixinJSBridgeReady", () => {WeixinJSBridge.invoke('getNetworkType', {}, play);});
} catch (e) {console.warn('非微信环境')
}
var isAppInside = /micromessenger/i.test(navigator.userAgent.toLowerCase()) || /yixin/i.test(navigator.userAgent.toLowerCase());
if (!isAppInside) {//给非微信易信浏览器play();if (el_audio.paused) {document.addEventListener('touchstart', play);}
}
//背景音乐结束
复制代码

转载于:https://juejin.im/post/5acabd4551882555784e3f91

h5背景音乐播放代码相关推荐

html背景音乐自动播放embed,怎样在网页中插入背景音乐(自动播放代码).doc
怎样在网页中插入背景音乐软件 Dreamweaver带浏览器的电脑 1 首先在网上下载一个Dreamweaver软件安装,当然使用其他的网站编程软件也可以. 2 打开软件界面如下. 3 选择&quo ...
【2019】H5背景音乐解决方案
H5背景音乐解决方案案例1: <!DOCTYPE html> <html> <body><audio id='audio' src='http://go.1 ...
H5背景音乐解决方案
前言背景音乐播放 1 自动播放 1 微信问题 2 Safari问题 3 解决方案代码 2 点击播放离开页面关闭音乐缓存状态 1 客户端存储数据方法 2 示例完整解决方案代码 1. 前言很多H ...
模拟网易云的H5音乐播放器
转发我在github发布的一个H5音乐播放器 H5MusicPlayer GitHub链接欢迎Fork & Star. 前言这是我第一个GitHub项目,之前一直想在GitHub写点东西, ...
H5页面播放M4a音频文件
业务场景: 手机app端录音,然后上传至后台服务器,前端从后台服务器获取录音,在PC端WEB页面播放. 实际问题: 首先app录音文件默认是m4a格式,而在PC端WEB H5页面,<audio& ...
H5音乐播放器（包含源码与示例）
H5音乐播放器(包含源码与示例) 基于Angular+ionic的H5音乐播放器,源码:https://gitee.com/CrimsonHu/h5-music-player 示例地址建议使用原版c ...
iphone 微信打开H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题 --由于苹果的ios系统的安全保护较严格,iphone手机打开微信H5的时候(针对于已对audio标签设置 autoplay为true的H5),通常要先点击 ...
Springboot+Minio通过分片下载解决IOS下H5无法播放视频问题
一.环境说明 JDK 1.8 Springboot 2.7.5 Minio 8.4.5 Vue3实现的微信公众号网页二.问题描述当前项目是基于springboot和vue3的前后端分离架构,前端目 ...
Html5酷播云视频播放器同层播放(代码实例)
在Android手机上使用H5播放视频时,大多数的国内浏览器厂商都会在视频播放时劫持<video>标签,使用浏览器自带的播放器播放视频,而且播放器会处于最高层级,视频上面无法显示其它htm ...

h5背景音乐播放代码

h5背景音乐播放代码相关推荐

最新文章

热门文章