js實現音頻播放

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title></title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style type="text/css">
		body{
			margin: 0;
			padding:0;
		}
		.boxlist{
			margin: 0 auto;
			width: 100vm;
			height: 100vh;
		}
		button{
			width: 100%;
			height: 25%;
			margin: 0 auto;
			font-size:0.9rem;
			background: #669ae3;
			color:#fff;
		}
		.clicked{
			background-color: #c5aa4e;
			color: #520126;
		}
	</style>
</head>
<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;
          docEl.style.fontSize = 100* (clientWidth / 1080) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<body>
	<div class="boxlist">
		<button onclick="music(1)" id="btn1">章貢謠</button>
		<button onclick="music(2)" id="btn2">最美的相遇</button>
		<button onclick="music(3)" id="btn3">大美宋城看章貢</button>
		<button onclick="music(4)" id="btn4">等你來</button>
	</div>
	<script type="text/javascript">
	  	var audio;
		function music(i){
			if(audio){
				 audio.pause(); // 切換的時候先暫停其他的
			}
			audio = i+".mp3";
         	audio = new Audio(audio); 
         // 	// 循環播放,播放結束繼續播放
	        $(audio).unbind("ended").bind("ended", function(){
	               audio.play();
	        })
	        $("#btn"+i).addClass("clicked").siblings().removeClass("clicked");
	        audio.play();
		}
		
	</script>
</body>
</html>

從實現這個功能的同時,瞭解到html5對audio和video的autoplay不在支持,如果調用play()會報如下錯

Uncaught(in promise)DOMException

監聽音樂播放完畢事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>audio監聽播放完畢</title>
</head>
<body>

<audio src="1.mp3" id="audio" controls="true" autoplay="true">
  <!-- <source src="1.mp3" type="audio/mpeg"> -->
  Your browser does not support the audio element.
</audio>
<script>
    var audio = document.getElementById("audio"); 
    audio.loop = false;
    audio.addEventListener('ended', function () {  
        alert('over');
    }, false);
</script> 
</body>
</html>

要實現自動循環播放,暫時沒有找到相關方法,因爲autoplay這條路不行了。
通過點擊一個,其他順序播放倒是可以實現。

<body>
	<audio controls="controls" autoplay="autoplay" id="audio" src="1.mp3"></audio>
	<script type="text/javascript">
		var i = 0;
		var audios=[,"2.mp3","3.mp3","4.mp3"];
		document.getElementById("audio").onended = function(){
		    if(audios[i]){
		        this.setAttribute('src',audios[i]);i++;
		    }else{
		        alert('沒有音樂了');
		    }
		};
	</script>
</body>

查閱網上相關資料,博客地址 https://www.jb51.net/article/80602.htm

只支持在IE瀏覽器播放,而且發現播放時長一直是00:00,有時間的話再去改進下這個js。雖然說在谷歌中需要根據瀏覽器改寫 window.attachEvent 時間,用addEventListener,但是還是無效。

if (window.attachEvent) {

  window.attachEvent("onload", foo);

} else if (window.addEventListener) {

  window.addEventListener("load", foo, false);

}

弄完之後,放到外網,配置個nginx,再製作一個二維碼,掃碼聽歌哈哈。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章