audio在微信活动中自动播放

最新推荐文章于 2024-05-22 15:35:29 发布

hangGe0111

最新推荐文章于 2024-05-22 15:35:29 发布

阅读量726

点赞数

分类专栏： html 文章标签： audio.play() 微信中自动播放

本文链接：https://blog.csdn.net/hangGe0111/article/details/85327505

版权

html 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<script type="text/javascript">
			(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if(!clientWidth) return;
						if(clientWidth > 768) {
							docEl.style.fontSize = '40px';
							return;
						}
						docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
					};
				if(!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.play-icon{
				height: 1.1rem;
				z-index: 2;
			    position: absolute;
			    top: 1.66%;
			    right: 2.67%;
			    
			}
			.play {
			    width: 1.7rem;
			    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAsCAMAAADrau63AAAAjVBMVEUAAADFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTGVtt68AAAALnRSTlMABPrd9rCCQwjYnSzouKtaTRDuzMBtRh2kOAzQx5eMh3VlVj8j4ZFgM2gW5CZU0KHTDAAAAqBJREFUSMeFVteW6jAMdHovpAEJBELZ0Nb//3l33WJsX8fzgo8kxoo0UgLM2Bzam8bVJ2U7eg0wYwshTJvYb4syCPZBEJTFdPZj7+C4ECMDMh4b2ZJAA3bSpac7tM8Syd5E8vMdfdvZyGZLJJ2JxOex4WgTWySRXEwkLa9FRCxVvJdIniaSYrmOVNp5hkDG2URS0sCJZNFaQMXJRBKQuAIiNFvwPxxNJA/SRFzSmKSR5JUnsO1MJB8s3jvmAAgWTj7/JslobKojeS35ehZWW43N3jfJgcYm4aM4eZGtkPQof2R2eszhkDuDbxJig3ZI9ZRc/JxRLeL00OmK/QM2+mKb6Zg5gtFKLj+UpEJi5zMUo6NbSpuAxnpAwpU67n9nHx1u3FpKsR8ae5JJSuoY6CPnvIK+7sJZdhTUcaAXdQtzbQHN/O2BZqYyIvjKWvRwJerLj8tuankj1ZmiovphZd3YSPm48iNqhiWOzltkoMWkKm3YQvhFhl8+LCyVWLdIWYtHVFc6QSN+rmWT1Sy2UXcgZ6etqP5+sLhy9lweEkuxxN5J6FMh8SjJGQAbwnS5Ef81RQdFa51C0lDPhEmGRSVbpH3c+gUBDVXfXzX1XHBNcpadw2blrPTAVndexHNMsoFsptcuurAbeO6vlL0CFKRchSq6yHmxgkxvafzU6YYJWIE1Z3xrjKqbubYrHFfaW7XDVumP/nxlro2e4+NKr4UFiQMF8JJr9ah0uJc4XKBHqruuhSLuK1UVI1NZqBy1nmSjjXQlksyYiRrZQwm5sSZqpGUr30l6ZELkkTsG5RNHj0mInPSfK+UKSfgthyjkjv4tyuQFVhDwhx+E8dhXkMOewSqCN6WYJWEnNU8xAAaExXF3mm9ARRdHLqzqY0fo/wEwl+HY7ZzzoQAAAABJRU5ErkJggg==) no-repeat;
				background-size: cover;
			}
			.noplay {
			    width: 1.375rem;
			    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAsCAMAAAD2FNAsAAAAh1BMVEUAAADFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHFcTHIVeNnAAAALHRSTlMA+wUMRfXbt1gsg7GbZuN159BgQCQeEtbFk4yHazUY8OvApqBwTMo6UbuqT0+jsgoAAAIDSURBVEjHhZXZmqowEIRDCFtYZREQFB1FZ8n7P985znTIQvNRN5q0f2I6VUAsHbuxJrjcaB5P8Q0vNkKI6+3OH+HM2IsxNodpzpO48z3xqy+ci8SOPnDutcf1OMf2OI5z4R434ly6x5UEdImDs+LyPe5HXpgvhHNvJDfscZWxgXc6/g2TPU7+t08YX3P6Hn7scfXS+RZm/PD/KJDLOBvchUjRsYC5riJP+Bq553CI/TXt6o7lHszG2d+nQ2HNKOTfrUY7lp2tc/myIOkeChOxdL7pXLzl24ys9OkrbrCLMxQOZC2aT5I7bfm2I5iOsQSDCPdtQFA9VOMSuCnTt98WgNjT49pdcZhMcO4udBXlUujVwTHd4PSebF9lLchxLoNQXxLHbJBs2APFXKgyQqJANqh/R+wLRinKVVBtjKBMOV38HqIcN1xN00LadfESw7AL/K5dB0Ue94WYJc10V+NBiWxvloFK2Wk7KI3VENhq3TQ68/i6ijuohmOsDx/56GMJlGwVXQsTzqDvWJg1us6HUhaqM5iVQi3YCURBbdkL9FScJzB5JbpfYPtV6eAZdis2XsXUsbgeggI3DN5fZ/pgcY93UK7BSLG3Zbr9OvyxXKZfk+9qgczMhhzt4Dnq6I3hzkm/2JLYYhlQJTUL0XPB2gp7RIT9fShrpMKS1hPTITEi+w8X88yWax74pQAAAABJRU5ErkJggg==) no-repeat;
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div id="mPlayer" class="play-icon play"></div>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				/*music*/
				var audio = document.createElement("audio");
			    audio.src ="music.mp3";
				audio.loop = "loop";
				audio.play();				
				/*在微信中调用微信播放器*/
				document.addEventListener("WeixinJSBridgeReady", function () {
			        audio.play();
			    }, false);
			    
			    var mPlayer = document.querySelector("#mPlayer");
			    mPlayer.addEventListener("click",function(){
			        if(audio.paused){
			            audio.play();
			            mPlayer.classList.remove("noplay");
			            mPlayer.classList.add("play");
			        }else{
			            audio.pause();
			            mPlayer.classList.add("noplay");
			            mPlayer.classList.remove("play");
			        }
			    });				
			});
		</script>
	</body>
</html>

2.效果

3.有的谷歌浏览器可能出现Uncaught (in promise) DOMException

请参考：https://mp.csdn.net/postedit/85334019

hangGe0111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
audio在微信活动中自动播放

1.代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initia
复制链接

扫一扫

专栏目录