blocks|key|442092|text|您可以使用事件委托。只需在捕捉阶段收听播放事件，然后暂停所有视频文件，但不是目标文件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|442093|document.addEventListener('play',+function(e){
++++var+audios+=+document.getElementsByTagName('audio');
++++for(var+i+=+0,+len+=+audios.length;+i+<+len;i%2B%2B){
++++++++if(audios[i]+!=+e.target){
++++++++++++audios[i].pause();
++++++++}
++++}
},+true);|code-block|syntax|javascript|442094|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can use event delegation. Simply listen to the play event in the capturing phase and then pause all video file, but not the target one:

<pre><code>document.addEventListener('play', function(e){
 var audios = document.getElementsByTagName('audio');
 for(var i = 0, len = audios.length; i &lt; len;i++){
 if(audios[i] != e.target){
 audios[i].pause();
 }
 }
}, true);
</code></pre>

blocks|key|443854|text|您可以使用存储当前播放元素的引用，而不是遍历页面上的所有音频标记并暂停它们，并且在播放另一个元素时只有一个暂停。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|443855|document.addEventListener("play",+function(evt)+{
++++if(this.$AudioPlaying+&&+this.$AudioPlaying+!==+evt.target)+{
++++++++this.$AudioPlaying.pause();
++++}
++++this.$AudioPlaying+=+evt.target;
},+true);|code-block|syntax|javascript|443856|entityMap^0|5|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Instead of looping over all audio tags on a page and pausing them, you can store a reference to the currently playing element, and have only that one pause when playing another.
<pre class="lang-js prettyprint-override"><code>document.addEventListener(&quot;play&quot;, function(evt) {
 if(this.$AudioPlaying &amp;&amp; this.$AudioPlaying !== evt.target) {
 this.$AudioPlaying.pause();
 }
 this.$AudioPlaying = evt.target;
}, true);
</code></pre>

blocks|key|2807392|text|之前的两个答案都不管用，我就用过了。我刚刚添加了&&+window.$_currentlyPlaying+!=+evt.target，一切都在工作。同时，我还为音频标签创建了一个带有这个和其他好处的要点。javascript-音频标签|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2807393|window.addEventListener("play",+function(evt)
{
++++if(window.$_currentlyPlaying+&&+window.$_currentlyPlaying+!=+evt.target)
++++{
++++++++window.$_currentlyPlaying.pause();
++++}+
++++window.$_currentlyPlaying+=+evt.target;
},+true);|code-block|syntax|javascript|2807394|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/erm3nda/f105cc80a478c641ca527f13866c5f4d/edit^0|O|16|2U|F|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

Mixing both previous answers that didn't work, i've used that. I just added <code>&amp;&amp; window.$_currentlyPlaying != evt.target</code> and all is working.
Also i've created a gist with this and other goodies for audio tags. <a href="https://gist.github.com/erm3nda/f105cc80a478c641ca527f13866c5f4d/edit" rel="noreferrer">javascript-audio-tags</a>

<pre><code>window.addEventListener("play", function(evt)
{
 if(window.$_currentlyPlaying &amp;&amp; window.$_currentlyPlaying != evt.target)
 {
 window.$_currentlyPlaying.pause();
 } 
 window.$_currentlyPlaying = evt.target;
}, true);
</code></pre>

blocks|key|442211|text|$("audio").on("play",+function()+{
++++var+id+=+$(this).attr('id');

++++$("audio").not(this).each(function(index,+audio)+{
++++++++audio.pause();
++++});
});

$("video").on("play",+function()+{
++++var+id+=+$(this).attr('id');

++++$("video").not(this).each(function(index,+video)+{
++++++++video.pause();
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|442212|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("audio").on("play", function() {
 var id = $(this).attr('id');

 $("audio").not(this).each(function(index, audio) {
 audio.pause();
 });
});

$("video").on("play", function() {
 var id = $(this).attr('id');

 $("video").not(this).each(function(index, video) {
 video.pause();
 });
});
</code></pre>

blocks|key|443913|text|我不知道这是不是因为Chrome更新，但以前的答案对我没有用。我在这里修改了一些代码，并提出了如下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|443914|document.addEventListener("play",+function(evt)
{
++++if(window.$_currentlyPlaying+&&+window.$_currentlyPlaying+!=+evt.target)
++++{
++++++++window.$_currentlyPlaying.pause();
++++}+
++++window.$_currentlyPlaying+=+evt.target;
},+true);|code-block|syntax|javascript|443915|我不知道为什么，但是widow.addEventListener不适合我，但是我喜欢将currentPlaying变量存储在window元素中，而不是在使用它之前在监听器之外创建它。|offset|length|style|CODE|443916|entityMap^0|0|0|A|M|17|E|1Q|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

I don't know if it is because of Chrome updates, but the previous answers did not work for me. I modified a bit of the code here and came up with this:

<pre><code>document.addEventListener("play", function(evt)
{
 if(window.$_currentlyPlaying &amp;&amp; window.$_currentlyPlaying != evt.target)
 {
 window.$_currentlyPlaying.pause();
 } 
 window.$_currentlyPlaying = evt.target;
}, true);
</code></pre>

I don't know why, but the <code>widow.addEventListener</code> was not working for me, but I liked the idea of having the <code>currentPlaying</code> variable stored in the <code>window</code> element instead of having to create it outside of the listener prior to using it.

blocks|key|443861|text|你甚至可以尝试这个解决方案，如果你不想循环通过|type|unstyled|depth|inlineStyleRanges|entityRanges|data|443862|var+previousAudio;
document.addEventListener('play',+function(e){
++++if(previousAudio+&&+previousAudio+!=+e.target){
++++++++previousAudio.pause();
++++}
++++previousAudio+=+e.target;
},+true);|code-block|syntax|javascript|443863|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can even try this solution, if you don't want to loop through
<pre><code>var previousAudio;
document.addEventListener('play', function(e){
 if(previousAudio &amp;&amp; previousAudio != e.target){
 previousAudio.pause();
 }
 previousAudio = e.target;
}, true);
</code></pre>

blocks|key|1730208|text|我在底部做了一个播放器，每次用户点击播放时都会更改src，这只是一种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1730209|HTML|1730210|<audio+src="tracks/track1.mp3"+type="audio/mp3"+class='audios'></audio>
++<i+class='fas+fa-play'>
++<i+class='far+fa-pause-circle'>
++<i+class='fas+fa-stop'>
<audio+src="tracks/track2.mp3"+type="audio/mp3"+class='audios'></audio>
++<i+class='fas+fa-play'>
++<i+class='far+fa-pause-circle'>
++<i+class='fas+fa-stop'>
<audio+src="tracks/track3.mp3"+type="audio/mp3"+class='audios'></audio>
++<i+class='fas+fa-play'>
++<i+class='far+fa-pause-circle'>
++<i+class='fas+fa-stop'>

++<audio+class='main-audio'+controls>
+++++<source+src="#"+type="audio/mp3">
++</audio>|code-block|syntax|javascript|1730211|JavaScript|1730212|const+audios_with_src+=+document.querySelectorAll('.audios')
const+play+=+document.querySelectorAll('.fa-play')
const+pause+=+document.querySelectorAll('.fa-pause-circle')
const+stop+=+document.querySelectorAll('.fa-stop')
const+main_player+=+document.querySelector('.main-audio')

for(let+i+=0;+i+<+audios_with_src.length;+i%2B%2B)+{
+play[i].addEventListener('click',+(e)+=>+{
++++main_player.src+=+audios_with_src[i].src;
++++main_player.play()+++
++++})

pause[i].addEventListener('click',+()+=>+{
++++main_player.pause()
})

stop[i].addEventListener('click',+()+=>+{
++++main_player.pause()
++++main_player.currentTime+=+0;++//+there+is+no+stop()+function+so+had+to+do+this
})


}|1730213|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I made a player at the bottom and changed the src every time the user clicks on play
this is just one way of doing it
HTML
<pre><code>&lt;audio src=&quot;tracks/track1.mp3&quot; type=&quot;audio/mp3&quot; class='audios'&gt;&lt;/audio&gt;
 &lt;i class='fas fa-play'&gt;&lt;/i&gt;
 &lt;i class='far fa-pause-circle'&gt;&lt;/i&gt;
 &lt;i class='fas fa-stop'&gt;&lt;/i&gt;
&lt;audio src=&quot;tracks/track2.mp3&quot; type=&quot;audio/mp3&quot; class='audios'&gt;&lt;/audio&gt;
 &lt;i class='fas fa-play'&gt;&lt;/i&gt;
 &lt;i class='far fa-pause-circle'&gt;&lt;/i&gt;
 &lt;i class='fas fa-stop'&gt;&lt;/i&gt;
&lt;audio src=&quot;tracks/track3.mp3&quot; type=&quot;audio/mp3&quot; class='audios'&gt;&lt;/audio&gt;
 &lt;i class='fas fa-play'&gt;&lt;/i&gt;
 &lt;i class='far fa-pause-circle'&gt;&lt;/i&gt;
 &lt;i class='fas fa-stop'&gt;&lt;/i&gt;

 &lt;audio class='main-audio' controls&gt;
 &lt;source src=&quot;#&quot; type=&quot;audio/mp3&quot;&gt;
 &lt;/audio&gt;
</code></pre>
JavaScript
<pre><code>const audios_with_src = document.querySelectorAll('.audios')
const play = document.querySelectorAll('.fa-play')
const pause = document.querySelectorAll('.fa-pause-circle')
const stop = document.querySelectorAll('.fa-stop')
const main_player = document.querySelector('.main-audio')

for(let i =0; i &lt; audios_with_src.length; i++) {
 play[i].addEventListener('click', (e) =&gt; {
 main_player.src = audios_with_src[i].src;
 main_player.play() 
 })

pause[i].addEventListener('click', () =&gt; {
 main_player.pause()
})

stop[i].addEventListener('click', () =&gt; {
 main_player.pause()
 main_player.currentTime = 0; // there is no stop() function so had to do this
})


}

</code></pre>

blocks|key|2807425|text|关于ECMA+2022的最佳解决方案重写：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2807426|++document.addEventListener('play',+(event)+=>+{
++++const+audios+=+[...document.getElementsByTagName('audio')];
++++
++++audios.forEach((audio)+=>+audio+!==+event.target+&&+audio.pause());
++},+true);|code-block|syntax|javascript|2807427|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Best solution rewritten regarding ECMA 2022:
<pre><code> document.addEventListener('play', (event) =&gt; {
 const audios = [...document.getElementsByTagName('audio')];
 
 audios.forEach((audio) =&gt; audio !== event.target &amp;&amp; audio.pause());
 }, true);
</code></pre>

I have 10 audio players with simple html audio tags on a html5 page.
No jquery, no special audio js plugins, etc...

Does anyone has a simple script in js to pause all other players when the current player is playing ?

I don't want to use js plugins because i want to keep a simple audio html code.

multiple audio html : auto stop other when current is playing with javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我有10个音频播放器与简单的html音频标签在一个html5页面。没有jquery，没有特别的音频js插件等等..。有没有人在js中有一个简单的脚本来在当前玩家播放时暂停所有其他玩家？我不想使用js插件，因为我想保留一个简单的音频html代码。

问多音频html :当前正在播放javascript时自动停止其他
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多音频html :当前正在播放javascript时自动停止其他EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多音频html :当前正在播放javascript时自动停止其他
EN