JS微信下自动播放音频

最新推荐文章于 2025-02-13 09:01:51 发布

川哥编程

最新推荐文章于 2025-02-13 09:01:51 发布

阅读量292

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 微信音视频

本文链接：https://blog.youkuaiyun.com/liyichuanZhengzhou/article/details/143788371

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/icon/cs/fontawesome.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=yes" />
<meta name="renderer" content="webkit" />
<script src="//cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<script src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="//unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<title>JS微信下自动播放音频</title>
<style>
body{margin:0px;padding:0px;background:#DDE4DC;}
.music {
    position: absolute;
    top: 5px;
	right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    background: #000;
    border: .0266666667rem solid #fff;
    border-radius: 50%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}
.music > i {}
.music > i:before {
    color: #fff;
}
.music > i.on {
	-webkit-animation: rotate 1s linear infinite;
	animation: rotate 1s linear infinite;
}
img{width:100%;}
#txt{padding:10px;line-height:26px;}
</style>
<script src="/js/u.js"></script>
</head>
<body>
<div data-click="music_click" class="music">
	<i onclick="music_click(this);" id="musicIcon" class="fas fa-music"></i>
	<!-- <audio loop="loop" preload="true" autoplay="autoplay" id="audio1" src="tts.mp3"></audio> -->
</div>

<img src="ig/0.gif" />
<div id="txt">川哥编程</div>

<script>
function music_click() {
	var icon = $$('#musicIcon');
	if (icon.className.indexOf('on') === -1) {
		addClassName(icon,'on');
		sound1.play();
	} else {
		delClassName(icon,'on');
		sound1.pause();
	}
}

var sound1 = new Howl({
	src: ['tts.mp3'],
	loop: true,
	//html5: true,
});

if (navigator.userAgent.indexOf('MicroMessenger') > -1) {
	document.addEventListener('WeixinJSBridgeReady', function() {
		music_click();
	}, false);
	
} else {
	sound1.play();
}
//var vConsole = new window.VConsole();
</script>
</body>
</html>