[HTML]音乐自动播放（兼容微信）
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
#play_btn {
position: absolute;
right: 6%;
top: 6%;
width: 24px;
height: 24px;
overflow: hidden;
background-color: #000;
border: solid 3px #ccc;
border-radius: 50%;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
} #play_btn button {
display: inline-block;
width: 24px;
height: 24px;
background-image: url(music.png);
background-repeat: no-repeat;
background-position: center;
background-size: 45%;
background-color: transparent;
border: none;
} #play_btn audio {
width: 0px;
height: 0px;
overflow: hidden;
visibility: hidden;
} #play_btn.play {
-webkit-animation: play 3s linear infinite;
-moz-animation: play 3s linear infinite;
-ms-animation: play 3s linear infinite;
animation: play 3s linear infinite;
} #play_btn.pause {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
} @keyframes play {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
} @-moz-keyframes play {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
} @-webkit-keyframes play {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
} @-ms-keyframes play {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
</head> <body>
<div id="play_btn">
<button type="button"></button>
<audio src="Hebe-A_little_happiness.aac" loop preload></audio>
</div>
<script>
/*
touchstart,DOMContentLoaded无法在jQuery.ready里执行监听操作
*/
function autoPlay() {
/* 自动播放音乐效果，解决浏览器或者APP自动播放问题 */
function musicInBrowserHandler() {
audioToggle(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler); /* 自动播放音乐效果，解决微信自动播放问题 */
function musicInWeixinHandler() {
audioToggle(true);
document.addEventListener('WeixinJSBridgeReady', function() {
audioToggle(true);
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
audioToggle(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
autoPlay(); // ==================================================== function audioToggle(isPlay) {
var playBtn = document.getElementById('play_btn');
var audio = playBtn.getElementsByTagName('audio')[0]; if (typeof(isPlay) == 'undefined') {
isPlay = !!audio.paused;
} var space = String.fromCharCode(32); // 空格
var playBtnClass = space + (playBtn.getAttribute('class') || (isPlay ? 'play' : 'pause')) + space;
if (isPlay) {
playBtnClass = playBtnClass.replace(space + 'pause' + space, space + 'play' + space);
audio.play();
} else {
playBtnClass = playBtnClass.replace(space + 'play' + space, space + 'pause' + space);
audio.pause();
}
playBtn.className = playBtnClass.replace(/(^\s*)|(\s*$)/g, '');
} document.getElementById('play_btn').onclick = function() {
audioToggle();
}
</script>
</body> </html>
[HTML]音乐自动播放（兼容微信）的更多相关文章
- H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)
<template> <audio src="./static/music.mp3" id="bgMusic" preload="a ...
- iphone微信 h5页音乐自动播放
iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...
- ios微信浏览器音乐自动播放
setTimeout(function(){ //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 document.getElementById('bgmedia').play() ...
- H5音乐自动播放ios//禁止安卓手机图片点击
定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...
- html - html5 audio 音乐自动播放，循环播放等
转自:http://blog.csdn.net/u012246458/article/details/50618759 audio播放音乐 <audio id="audio" ...
- 解决ios下的微信打开的页面背景音乐无法自动播放
后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...
- 微信h5，背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...
- 解决ios下的微信页面背景音乐无法自动播放问题
在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...
- 解决在微信中部分IOS不能自动播放背景音乐
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的.直到微信火 ...
随机推荐
- admin-6
Admin06 基本权限访问方式(权限) 读取:允许查看内容-read r 写入:允许修改内容-write w 可执行:允许运行和切换-execute x 对与文本文件: r:cat head tai ...
- javascript常见问题总结
1.const obj = {a:6}; obj.b=8; obj.a=9;//obj为{a:9,b:8};const定义对象的时候是可以改变内容的. const b = "hello&qu ...
- EBS查询在线用户
转自:https://www.cnblogs.com/benio/archive/2011/03/10/1979417.html SELECT u.user_name, app.application ...
- Linux 连接mysql
连接MYSQL: 格式: mysql -h主机地址 -u用户名 -p用户密码 1.例1:连接到本机上的MYSQL 找到mysql的安装目录,一般可以直接键入命令mysql -uroot -p,回车后提 ...
- Flutter Inspector 功能：Toggle Platform，Show Debug Paint，Show Paint Baselines
Flutter Inspector 功能 说明 Toggle Platform 切换操作系统(Android.iOS) Show Debug Paint Show Paint Baselines Wi ...
- 剑指offer 8.递归和循环 跳台阶
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 解题思路一: a.如果两种跳法,1阶或者2阶,那么假定第一次跳的是 ...
- 4.认识Angular组件之2
11. 变化监测:Angular提供了数据绑定的功能.所谓的数据绑定就是将组件类的数据和页面的DOM元素关联起来.当数据发生变化时,Angular能够监测到这些变化,并对其所绑定的DOM元素 进行相应 ...
- 在已安装64位oracle的服务器安装32位客户端
应用场景:服务器操作系统是win2012 64位,原先安装了64位oracle12,后来系统增加导入excel的功能,网站必须启用32位兼容模式,这时候发现原有的页面打不开,提示: 试图加载格式不正确 ...
- [蓝桥杯]PREV-27.历届试题_蚂蚁感冒
问题描述 长100厘米的细长直杆子上有n只蚂蚁.它们的头有的朝左,有的朝右. 每只蚂蚁都只能沿着杆子向前爬,速度是1厘米/秒. 当两只蚂蚁碰面时,它们会同时掉头往相反的方向爬行. 这些蚂蚁中,有1只蚂 ...
- [蓝桥杯]PREV-21.历届试题_回文数字
问题描述 观察数字:, 都有一个共同的特征,无论从左到右读还是从右向左读,都是相同的.这样的数字叫做:回文数字. 本题要求你找到一些5位或6位的十进制数字.满足如下要求: 该数字的各个数位之和等于输入 ...