使用微信API實現H5頁面播放音訊檔案

呆水發表於2019-06-03
APIH5音訊

之前在處理H5頁面播放音訊檔案的時候，總是需要搞一個https才能正常播放，一次無意瀏覽到了一個自動播放音訊的頁面，發現了使用微信Api可以不使用https也能播放音訊檔案。作為記錄，簡單頁面實現如下:
 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<audio hidden="hidden" id="audio">
        <source src="alcohol.mp3" type="audio/mp3">
        <embed height="50px" width="100px" src="alcohol.mp3">
    </audio>
    <script src=”http://libs.baidu.com/jquery/2.1.1/jquery.min.js”></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript">
    	wx.config({
	        debug: false,
	        appId: 'wxcee5eba3aba35e35',
	        timestamp: 1559524606,
	        nonceStr: 'fd6e1bfe6ead430db24a9bba4afbbc5f',
	        signature: '7f3c14f2817f58321e7cce1ecc7c682bc4ad95c2',
	        jsApiList: [
	            'checkJsApi',
	            'getLocation'
	        ]
	    });
	    // setTimeout("getLocation()","3000");
	    wx.ready(function(){
	    	
	    });
    	Orderprocessing();
    	function autoPlayAudio() {
	        wx.ready(function() {
	            // document.getElementById('audio').play();
	            var vid = document.getElementById("audio");//獲取音訊物件
	            vid.play();
	        });
	    }
    	function Orderprocessing(){
	        var vid = document.getElementById("audio");//獲取音訊物件
	        var start = 0;//定義迴圈的變數
	        var times=3;//定於迴圈的次數
	        autoPlayAudio(vid);
	        if(vid.paused) {
	            vid.play();// 這個就是播放
	        }
	        vid.addEventListener("ended",function() {
	            autoPlayAudio(vid);
	            if(vid.paused)                     {
	                vid.play();// 這個就是播放
	            }
	            start++;//迴圈
	            start == times && vid.pause();//也就是當迴圈的變數等於次數的時候，就會終止迴圈並且關掉音訊
	        });
	    }
    </script>
</body>
</html>

注意：其中使用的音訊檔案請自己替換。

相關文章