モバイル側でaudioが同時に再生できる複数の問題を解決

まず説明しますが、内容はueditorリッチテキストで、もともと1つのオーディオしかありませんでしたが、製品のニーズに応じて、1つのオーディオの制限を外しました.その結果、移動端で発見され、複数のオーディオが同時に再生できることに気づきました.これは気まずいです.整理の考え方で発見されました.この効果を実現するには、レンダリングテキストが完成した後、すべてのaudioラベルを取得する必要があります.ラベルの上に再生イベントを追加し、a、b、cの3つのaudioラベルの中で、aはすでに再生されており、bをクリックして再生する前にaラベルの再生を閉じる必要がある場合は、1つの再生のみの修正を実現することができます.コードは以下の通りである.テキストレンダリング後にすべてのaudioラベルが取得され、pauseAll()イベントがバインドされます.

vm.audioList = document.getElementsByTagName("audio");//       
					if(vm.audioList.length>0){//         
					//	console.log(vm.audioList,"...",vm.articleInfo);
						//       audio        
						//  play        
						[].forEach.call(vm.audioList, function (i) {
							i.addEventListener("play", vm.pauseAll.bind(i));
						});
					}

2.pauseAll()イベントの具体的な実装、e.targetが現在クリックしているaudioタグを取得できることに注意してくださいjsのthisタグです

pauseAll: function(e){//         ，       ，       
			//
		//	console.log(e.target,"...",this);
			var self = e.target;//         audio
			[].forEach.call(this.audioList, function (i) {
				//  audios    audio    
				i !== self && i.pause();
			})

		}