cocos打包web - ios設備息屏及前后臺切換音頻播放問題

切換前臺時，延遲暫停與恢復能解決大部分ios平臺前后臺切換后音頻無法恢復的問題；

if (cc.sys.isBrowser && cc.sys.os === cc.sys.OS_IOS && cc.sys.isMobile) {cc.game.on(cc.game.EVENT_GAME_INITED, () => {cc.game.on(cc.game.EVENT_SHOW, () => {setTimeout(() => {audioContext.suspend();}, 50);setTimeout(() => {audioContext.resume();}, 100);});});
}

如果還是無法恢復，重新播放音頻時，先暫停一次所有音頻，然后在恢復所有音頻（重寫CCAudio.js）；

/* 音頻重寫【CCAudio.js部分重寫】* @Description: 主要用于解決IOS音頻異常（切后臺后無聲音），需在Creator編輯器內設置為插件* @Author: vcom_ls 2670813470@qq.com* @Date: 2025-02-28 10:48:08* @LastEditors: vcom_ls 2670813470@qq.com* @LastEditTime: 2025-03-04 17:55:14* @FilePath: \MyVcom\assets\CC\CCAudioManager\AudioOverriding.js* @Copyright (c) 2025 by vcom_ls, All Rights Reserved.*/let touchBinded = false;
let touchPlayList = [//{ instance: Audio, offset: 0, audio: audio }
];
cc._Audio.prototype._createElement = function () {let elem = this._src._nativeAsset;if (elem instanceof HTMLAudioElement) {// Reuse dom audio elementif (!this._element) {this._element = document.createElement('audio');}this._element.src = elem.src;} else {this._element = new WebAudioElement(elem, this);}
};
cc._Audio.play = function () {let self = this;this._src &&this._src._ensureLoaded(function () {// marked as playing so it will playOnLoadself._state = 1;// TODO: move to audio event listenersself._bindEnded();let playPromise = self._element.play();// dom audio throws an error if pause audio immediately after playingif (window.Promise && playPromise instanceof Promise) {playPromise.catch(function (err) {// do nothing});}self._touchToPlay();});
};
cc._Audio._touchToPlay = function () {// # same start// if (this._src && this._src.loadMode === LoadMode.DOM_AUDIO && this._element.paused) {if (this._src && this._src.loadMode === 0 && this._element.paused) {touchPlayList.push({ instance: this, offset: 0, audio: this._element });}// # same endif (touchBinded) return;touchBinded = true;let touchEventName = 'ontouchend' in window ? 'touchend' : 'mousedown';// Listen to the touchstart body event and play the audio when necessary.cc.game.canvas.addEventListener(touchEventName, function () {let item;while ((item = touchPlayList.pop())) {item.audio.play(item.offset);}});
};
cc._Audio.stop = function () {let self = this;this._src &&this._src._ensureLoaded(function () {self._element.pause();self._element.currentTime = 0;// remove touchPlayListfor (let i = 0; i < touchPlayList.length; i++) {if (touchPlayList[i].instance === self) {touchPlayList.splice(i, 1);break;}}self._unbindEnded();self.emit('stop');self._state = 3;});
};let TIME_CONSTANT;
if (cc.sys.browserType === cc.sys.BROWSER_TYPE_EDGE || cc.sys.browserType === cc.sys.BROWSER_TYPE_BAIDU || cc.sys.browserType === cc.sys.BROWSER_TYPE_UC) {TIME_CONSTANT = 0.01;
} else {TIME_CONSTANT = 0;
}
// Encapsulated WebAudio interface
let WebAudioElement = function (buffer, audio) {this._audio = audio;this._context = cc.sys.__audioSupport.context;this._buffer = buffer;this._gainObj = this._context['createGain']();this.volume = 1;this._gainObj['connect'](this._context['destination']);this._loop = false;// The time stamp on the audio time axis when the recording begins to play.this._startTime = -1;// Record the currently playing 'Source'this._currentSource = null;// Record the time has been playedthis.playedLength = 0;this._currentTimer = null;this._endCallback = function () {if (this.onended) {this.onended(this);}}.bind(this);
};let isHide = false; // 是否切換后臺
(function (proto) {proto.play = function (offset) {// # add startif (isHide && cc.sys.isBrowser && cc.sys.os === cc.sys.OS_IOS && cc.sys.isMobile) {isHide = false;cc.sys.__audioSupport.context.suspend();}// # add end// If repeat play, you need to stop before an audioif (this._currentSource && !this.paused) {this._currentSource.onended = null;this._currentSource.stop(0);this.playedLength = 0;}let audio = this._context['createBufferSource']();audio.buffer = this._buffer;audio['connect'](this._gainObj);audio.loop = this._loop;this._startTime = this._context.currentTime;offset = offset || this.playedLength;if (offset) {this._startTime -= offset;}let duration = this._buffer.duration;let startTime = offset;let endTime;if (this._loop) {if (audio.start) audio.start(0, startTime);else if (audio['notoGrainOn']) audio['noteGrainOn'](0, startTime);else audio['noteOn'](0, startTime);} else {endTime = duration - offset;if (audio.start) audio.start(0, startTime, endTime);else if (audio['noteGrainOn']) audio['noteGrainOn'](0, startTime, endTime);else audio['noteOn'](0, startTime, endTime);}this._currentSource = audio;audio.onended = this._endCallback;// If the current audio context time stamp is 0 and audio context state is suspended// There may be a need to touch events before you can actually start playing audioif ((!audio.context.state || audio.context.state === 'suspended') && this._context.currentTime === 0) {let self = this;clearTimeout(this._currentTimer);this._currentTimer = setTimeout(function () {if (self._context.currentTime === 0) {touchPlayList.push({instance: self._audio,offset: offset,audio: self,});}}, 10);}if (cc.sys.os === cc.sys.OS_IOS && cc.sys.isBrowser && cc.sys.isMobile) {// Audio context is suspended when you unplug the earphones,// and is interrupted when the app enters background.// Both make the audioBufferSource unplayable.// # diff start// if ((audio.context.state === 'suspended' && this._context.currentTime !== 0) || audio.context.state === 'interrupted') {// reference: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/resumeaudio.context.resume();// }// # diff end}};proto.pause = function () {clearTimeout(this._currentTimer);if (this.paused) return;// Record the time the current has been playedthis.playedLength = this._context.currentTime - this._startTime;// If more than the duration of the audio, Need to take the remainderthis.playedLength %= this._buffer.duration;let audio = this._currentSource;if (audio) {if (audio.onended) {audio.onended._binded = false;audio.onended = null;}audio.stop(0);}this._currentSource = null;this._startTime = -1;};Object.defineProperty(proto, 'paused', {get: function () {// If the current audio is a loop, paused is falseif (this._currentSource && this._currentSource.loop) return false;// startTime default is -1if (this._startTime === -1) return true;// Current time -  Start playing time > Audio durationreturn this._context.currentTime - this._startTime > this._buffer.duration;},enumerable: true,configurable: true,});Object.defineProperty(proto, 'loop', {get: function () {return this._loop;},set: function (bool) {if (this._currentSource) this._currentSource.loop = bool;return (this._loop = bool);},enumerable: true,configurable: true,});Object.defineProperty(proto, 'volume', {get: function () {return this._volume;},set: function (num) {this._volume = num;// https://www.chromestatus.com/features/5287995770929152if (this._gainObj.gain.setTargetAtTime) {try {this._gainObj.gain.setTargetAtTime(num, this._context.currentTime, TIME_CONSTANT);} catch (e) {// Some other unknown browsers may crash if TIME_CONSTANT is 0this._gainObj.gain.setTargetAtTime(num, this._context.currentTime, 0.01);}} else {this._gainObj.gain.value = num;}if (cc.sys.os === cc.sys.OS_IOS && !this.paused && this._currentSource) {// IOS must be stop webAudiothis._currentSource.onended = null;this.pause();this.play();}},enumerable: true,configurable: true,});Object.defineProperty(proto, 'currentTime', {get: function () {if (this.paused) {return this.playedLength;}// Record the time the current has been playedthis.playedLength = this._context.currentTime - this._startTime;// If more than the duration of the audio, Need to take the remainderthis.playedLength %= this._buffer.duration;return this.playedLength;},set: function (num) {if (!this.paused) {this.pause();this.playedLength = num;this.play();} else {this.playedLength = num;}return num;},enumerable: true,configurable: true,});Object.defineProperty(proto, 'duration', {get: function () {return this._buffer.duration;},enumerable: true,configurable: true,});
})(WebAudioElement.prototype);// # add start
if (cc.sys.isBrowser && cc.sys.os === cc.sys.OS_IOS && cc.sys.isMobile) {cc.game.on(cc.game.EVENT_GAME_INITED, () => {cc.game.on(cc.game.EVENT_HIDE, () => {// 'suspended':音頻處于暫停狀態、// 'running':音頻正在運行、// 'closed':音頻上下文已關閉、// 'interrupted':音頻被中斷。let audioContext = cc.sys.__audioSupport.context;let state = audioContext.state;console.log('hide', state, new Date().getTime());//// 無效廢棄// if (state === 'running') {// 	audioContext.suspend();// }// 切換后臺時重置音頻狀態isHide = true;});cc.game.on(cc.game.EVENT_SHOW, () => {// 'suspended':音頻處于暫停狀態、// 'running':音頻正在運行、// 'closed':音頻上下文已關閉、// 'interrupted':音頻被中斷。let audioContext = cc.sys.__audioSupport.context;let state = audioContext.state;console.log('show', state, new Date().getTime());//// 無效廢棄// if (state === 'interrupted' || state === 'suspended') {// 	audioContext// 		.resume()// 		.then(() => {// 			console.log('嘗試恢復音頻上下文');// 		})// 		.catch((error) => {// 			console.error('恢復音頻上下文失敗:', error);// 		});// }setTimeout(() => {audioContext.suspend();}, 50);setTimeout(() => {audioContext.resume();}, 100);});});
}
// # add end

簡單總結：發現問題后，最開始是準備嚴格按照音頻上下文狀態來處理邏輯，測試后發現無效（感興趣的同學可以去試試）。同時增加了輸出的切換前后臺輸出，發現并非像安卓一樣切換后臺時輸出“hide”，恢復前臺時輸出“show”，而是有時候一次輸出兩個“hide”，而且通過輸出的時間發現，“hide”和“show”幾乎是同時輸出的，而且時間明顯不是切換后臺的時間；因此猜測在 ios 上會不會是在恢復前臺后才先后調用 “EVENT_HIDE” 與 “EVENT_SHOW” 呢？（僅猜測結果無法保證）不過對此我想到手動來處理音頻的暫停與恢復，因此有了第一個方法；

第二種方法是做了一個保證（考慮到萬一因為安全機制【禁止在無用戶交互的情況下自動播放音頻】導致恢復音頻失敗），在切換后臺后，首次播放音頻時調用一次 “suspend”方法，再調用一次 “resume”方法，來恢復音頻；

親測只延遲來處理都能解決大部分 ios web 沒音的問題（使用第二種方法記得設置插件）。