AudioContext開發後臺管理系統新訂單提示音(audio不能自動播放)

2020-09-24 14:00:48

audio

因為audio標籤不能自動播放。需要使用者和瀏覽器又互動才能實現播放。但是需求是不能顯示播放器控制元件,只能有聲音響起。

AudioContext

使用AudioContext能解決該問題

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
var context = new window.AudioContext();
var source = null;
var audioBuffer = null;
//最好使用本地音訊檔,無跨域問題
function playSound() {
	source = context.createBufferSource();//獲取音訊資料
	source.buffer = audioBuffer;
	source.connect(context.destination);
	source.start(); //立即播放
}
function initSound(arrayBuffer) {
	context.decodeAudioData(arrayBuffer, function (buffer) { //解碼成功時的回撥函數
		audioBuffer = buffer;
		playSound();
	}, function (e) { //解碼出錯時的回撥函數
		console.log('Error decoding file', e);
	});
}
function loadAudioFile(url) {
	var xhr = new XMLHttpRequest(); //通過XHR下載音訊檔
	xhr.open('GET', url, true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function (e) { //下載完成
		initSound(this.response);
	};
	xhr.send();
}
loadAudioFile(xxxxxx.mp3)

定時器請求介面獲取是否有新訂單,有新訂單source.start();播放,