jQuery音频语音自动播放特效代码下载


jQuery音频语音自动播放特效代码下载
jQuery音频语音自动播放特效代码下载以及音频语音、自动播放等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jweixin-1.0.0.js"></script>
<script src="js/jweixin-1.0.0.js"></script>

3. HTML代码

<h3>【good】音频自动播放总结(兼容微信苹果iphone)</h3>
<div id="audioDiv">
	<audio id="audio" controls="controls" autoplay="autoplay">
		<source src="" type="audio/mpeg">
		设置不支持音频文件
	</audio>
</div>
<div class="buttons">
	<div class="btn play">播放</div>
	<div class="btn pause">暂停</div>
	<div class="btn stop">停止</div>
	<div class="btn skip">跳到第3秒</div>
</div>
<style>
</style>
<script type="text/javascript">
	/*------------设置音频播放变量 edit 20190602-1 把这些变量放到前面-------------*/
	var media = document.getElementById('audio'); //音频对象 //edit 20190602-1 把变量audio改成media
	var mp3Root = 'mp3/'; //音频根路径
	var audioArr = [];
	var mp3Arr = ['1.mp3','2.mp3','3.mp3','4.mp3'];
	for(var i=0;i<mp3Arr.length;i++){audioArr.push(mp3Root+mp3Arr[i]);}
	mp3Arr = audioArr;
	/**:::::::::::::::::::::::::
	 * [函数:自动播放音频]
	 * @param string mp3 音频文件路径
	 * edit 20190602-1
	 :::::::::::::::::::::::::*/
	function autoPlayAudio(mp3){ 
		if(typeof(mp3)=='undefined') mp3 = "";
		//alert("声音文件111:\n"+mp3);
		//1.电脑端、安卓这样就可以自动播放了
		$('#audio source')[0].src = mp3; //音频赋值 
		//2.准备开始播放时(这段代码并非必须,加上比较保险)
		media.oncanplay = function(){
			media.play(); 
			//alert("hi,声音准备开始播放了");
		}
		//3.自动播放兼容:苹果iphone(ios)中内置浏览器safri直接播放音频
		//实测:对大部分ios版本用内置浏览器或在微信中打开网页都有效
		//说明1:iphone浏览器safri需等待用户交互动作后才能播放media,即如果你没有得到用户的action就播放的话就会被safri拦截
		//说明2:本方案其实是个障眼法,因为一般人打开手机网站手指总会不经意就碰到屏幕
		if (/iphone|ipod|mac|ipad/i.test(navigator.userAgent.toLocaleLowerCase())) {
			//$('html,body').on('touchstart', function() { //总是
			$('html,body').one('touchstart', function() { //只一次        
				media.play(); 
			})
		}
		//4.自动播放兼容:苹果iphone(ios)部分ios版本可能要先load下才能播放       
		media.load();  
		//5.自动播放兼容:微信中打开时在苹果iphone(ios)中自动播放音频
		//一般须在head标签中引入微信的js:http://res.wx.qq.com/open/js/jweixin-1.0.0.js,且在微信Weixin JSAPI的WeixinJSBridgeReady才能生效。
		//注意1:WeixinJSBridgeReady只会触发一次,若微信已经ready了,但还没执行到你监听这个ready事件的代码,那么你的监听是没用的,
		//注意2:WeixinJSBridgeReady只适合一开始就自动播放声音,若你是做那种微信场景(打开页面模拟收到很多条微信,每条微信都要播放那段音效)或初始化故意延时几秒才播放声音,实际上这种兼容方案也是无效的
		//注意3:若监听里面添加alert调试,一般在微信中打开链接是不会alert的,而是刷新页面时才会alert出来
		//注意4:若删了下面代码,在微信中部分iphone(ios)版本是不会自动播放声音的     
		document.addEventListener("WeixinJSBridgeReady", function () { 
		   media.play();  
		   //alert("Hi,微信中的部分苹果iphone(ios)版本");
		}, false);
	}
	/**:::::::::::::::::::::::::
	 * [函数:解决音频自动播放Bug]
	 * 此Bug一般出现在苹果iphone(ios)中
	 * bug1:无法同时播放多个音频
	 * bug2:单个音频想要延迟N秒后才自动播放,却发现不会自动播放了
	 * @param string mp3 音频文件路径
	 * add 20190602-1
	 :::::::::::::::::::::::::*/
	function iosPlayBugs(mp3){
		if (window.WeixinJSBridge) {
			WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
				media.play();
			}, false);
		} else {
			document.addEventListener("WeixinJSBridgeReady", function () {
				WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
					media.play();
				});
			}, false);
		}
		autoPlayAudio(mp3);
		media.play(); //必须,否则在非微信中(即手机内置浏览器中)打开时不会播放
	}
	$(function() {
		/*------------初始化播放音频edit 20190602-1-------------*/
		//=====马上播放
		//autoPlayAudio(mp3Arr[0]);
		//=====延时播放
		var initTimes = 3; //初始化时多少秒后推送消息(单位:秒)
		var count = 1; //计数器
		var sh = setInterval(function(){
			count++;
			if(count%initTimes==0){ //取余,整数倍
				iosPlayBugs(mp3Arr[0]);
				//只执行一次就把定时器销毁,以免系统卡顿
				clearInterval(sh);
				sh = null;
			}
		},1000);
		/*+------------------------+*/
		//=====定时器
		var sTimes = 10; //播放间隔(秒)
		var duration = 0; //音乐时长(秒) 
		var timer = setInterval(function() {
			autoPlayAudio(mp3Arr[2]);
		}, parseFloat(sTimes) * 1000);
		///////////////////////////////////////////////////////////////////////////////////////////
		///////////////////////////////////////////////////////////////////////////////////////////
		/*---------------------------------------------------------------------------------------*/
		/***********************************
			*2.所有音频:
			 你有新短消息.mp3
			 新的询价请回复.mp3
			 新的询价委托.mp3
			 新的在线消息.mp3
		************************************/
		/***********************************
		*【1.参考文件】
		参考: Audio对象 http://www.runoob.com/jsref/dom-obj-audio.html
		音频播放Bug参考:
		iOS苹果和微信中音频和视频实现自动播放的方法:https://www.cnblogs.com/kevin1220/p/5807466.html
		ios微信h5音频audio无法自动播放问题:https://blog.csdn.net/ZHIYUANfL/article/details/64922104?locationNum=8&fps=1
		移动端不支持audio自动播放解决方案:https://segmentfault.com/a/1190000004844420
		*【2.音频主要事件】
		//主要方法如下:
		var audio = document.getElementById('audio'); //音频对象
		//开始播放
		audio.play();   //或 $('#audio')[0].play(); //或  audio.paused && audio.play();
		//暂停播放  
		audio.pause();  //或 $('#audio')[0].play(); 
		//音频总时长
		audio.duration; //若值为NaN,则在[监听开始播放事件]里写此方法即可
		audio.load();  //加载音频(若动态改变音频文件,需先使用此方法,再audio.play()才能起播放)
		//停止播放
		audio.currentTime = 0;
		audio.pause();
		//跳到第50秒播放
		audio.currentTime = 50;
		audio.play();
		//判断音频是暂停还是播放中
		if(audio.paused){
			 //暂停中..
			 //audio.play();
		}else{
			//播放中..
			//audio.pause();
		}
		//监听开始播放事件(是否准备好播放)
		$('#audio')[0].addEventListener("canplaythrough", function() { //canplaythrough可换成canplay
			//...
		}, false);
		//监听播放结束事件
		$('#audio')[0].addEventListener('ended',function(){ 
			//...
		}, false);
		***********************************/
		/*---------------------------------------------------------------------------------------*/
		//=====创建音频节点
		var createAudio = function(url) {
			var duration = 0;
			var node = '#audioDiv';
			$(node).empty();
			// var _html = '<audio id="audio" controls="controls" autoplay="autoplay">' +
			var _html = '<audio id="audio" controls="controls">' +
				'<source src="' + url + '" type="audio/mpeg">' +
				'</audio>';
			//只创建一个音频节点
			if ($('#audioDiv').children().length == 0) {
				$('#audioDiv').append(_html);
				//$('#audio')[0].play();
			} else {
				$('#audio source').attr('src', url);
				$('#audio')[0].load();
			}
		}
		/*::::::::::::::::::::::
		**********定时器********
		:::::::::::::::::::::::*/
		//=====定时播放音频
		var letItPlay = function() { //播放音乐
			var numc = 0; //计数标记
			var intervals = 5; //播放间隔(秒)
			var totalTimes = 0; //总播放间隔
			var duration = 0; //音乐时长(秒)     
			//...定时器
			timer = setTimeout(function() {
				numc++;
				var mp3 = 'mp3/1.mp3';
				if (numc > 1) {
					mp3 = 'mp3/2.mp3';
				}
				createAudio(mp3);
				$('#audio')[0].addEventListener("canplaythrough", function() {
					//$('#audio')[0].paused && $('#audio')[0].play(); //播放
					//$('#audio')[0].load();
					$('#audio')[0].play(); //播放
					duration = $('#audio')[0].duration;
				}, false);
				if (numc > 0) totalTimes = parseFloat(intervals) * 1000 + parseFloat(duration) * 1000;
				//alert('duration2:' + duration + '\ntotalTimes:' + totalTimes);
				setTimeout(arguments.callee, totalTimes); //...setTimeout循环执行
				/*$('#audio')[0].addEventListener('ended', function () { //监听播放结束事件
					 //...
				 }, false);*/
			}, totalTimes);
		}
		// letItPlay(); //播放
		/*---------------------------------------------------------------------------------------*/
		// for (var i = 1; i <= 5; i++) {
		//     (function() {
		//         var j = i;
		//         var times = i*1000;
		//         if(i==1) times = 0;
		//         setTimeout( function timer() {
		//             console.log(j);
		//         },times); //这一行将i*1000改为j*1000也行,并不影响
		//     })();
		// }
		/*---------------------------------------------------------------------------------------*/
		/*
		//=======几秒后加载另外一种声音
		setTimeout(function(){
			//$('#audio')[0].currentTime = 0;
			//$('#audio')[0].pause();
			$('#audio')[0].load(); //必须,不然无法加载另外一个音频
			letItPlay('mp3/你有新短消息.mp3');
		},8000);
		*/
		/*---------------------------------------------------------------------------------------*/
		//=====开始播放
		$('.play').on('click', function() {
			$('#audio source')[0].src = mp3Root + '3.mp3'; //更改音频文件
			$('#audio').load(); //必须,下面的play()才能起作用
			$('#audio')[0].play();
		});
		//=====暂停播放
		$('.pause').on('click', function() {
			if (audio.paused) {
				audio.play();
			} else {
				audio.pause();
			}
		});
		//=====停止播放
		$('.stop').on('click', function() {
			$('#audio')[0].currentTime = 0;
			$('#audio')[0].pause();
		});
		//=====跳到第N秒播放
		$('.skip').on('click', function() {
			$('#audio')[0].currentTime = 3;
			$('#audio')[0].play();
		});
	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章