我如何使用布尔值来停止一首音乐，而另一首音乐正在播放

Question

我有两首冥想音乐，它们使用 js 通过按钮播放和停止。问题是播放一个，点击另一个也会播放。

我想要一个在点击另一个时停止播放。我正在学习布尔值。有没有办法使用布尔值来做到这一点？

<div class="main-box">
  
<div class="slot1"> 
  
<p class="line line1">this is the long music</p>

<audio id=rollSound loop>
  <source src="sounds/long-medi.mp3" type="audio/mpeg">
  <source src="sounds/long-medi.ogg" type="audio/ogg">
  Your browser does not support the sound files. Please proceed by using other solutions.
  <!--the obove text will only show if the users' browser does not play the two files. -->
</audio>
<button id=play>play/stop</button>

<script>
const rollSound = document.getElementById('rollSound');
const btn = document.getElementById('play');

btn.addEventListener("click", e => rollSound.paused ? rollSound.play() : rollSound.pause());
                                                                    
</script>
</div>



<div class="slot2"> 
  <p class="line line2">this is for short music</p>

  <audio id=shortsound loop>
  <source src="sounds/short-medi.mp3" type="audio/mpeg">
  <source src="sounds/short-medi.ogg" type="audio/ogg">
  Your browser does not support the sound files. Please proceed by using other solutions.
</audio>
<button id=roll>play/stop</button>

<script>
const shortsound = document.getElementById('shortsound');
const btn2 = document.getElementById('roll');

btn2.addEventListener("click", e => shortsound.paused ? shortsound.play() : shortsound.pause());



</script>

<script>
const rollSoundEl = document.getElementById('rollSound');
const shortsoundEl = document.getElementById('shortsound');
const btn = document.getElementById('play');
const btn2 = document.getElementById('roll');

function playOneSound(soundToPlay, soundToPause) {
    soundToPlay.paused ? soundToPlay.play() : soundPlay.pause()
    soundToPause.pause()
}

btn.addEventListener("click", () => playOneSound(rollSoundEl, shortsoundEl));
btn2.addEventListener("click", () => playOneSound(shortsoundEl, rollSoundEl));

  </script>

</div>
  




</div> <!--main-box-->

Answer 1

声明变量

const rollSoundEl = document.getElementById('rollSound');
const shortsoundEl = document.getElementById('shortsound');
const sounds = {shortsound: shortsoundEl,rollsound: rollSoundEl}
const btn = document.getElementById('play');
const btn2 = document.getElementById('roll');

写逻辑

function playOneSound(soundToPlay, soundToPause) {
    const soundEl = sounds[soundToPlay]
    const soundToPauseEl = sounds[soundToPause]
    soundEl.paused ? soundEl.play() : soundEl.pause()
    soundToPauseEl.pause()
}

实现逻辑

btn.addEventListener("click", () => playOneSound('rollsound', 'shortsound'));
btn2.addEventListener("click", () => playOneSound('shortsound', 'rollsound'));

另一种方式

声明变量

const rollSoundEl = document.getElementById('rollSound');
const shortsoundEl = document.getElementById('shortsound');
const btn = document.getElementById('play');
const btn2 = document.getElementById('roll');

写逻辑

function playOneSound(soundToPlay, soundToPause) {
    soundToPlay.paused ? soundToPlay.play() : soundPlay.pause()
    soundToPause.pause()
}

实现逻辑

btn.addEventListener("click", () => playOneSound(rollSoundEl, shortsoundEl));
btn2.addEventListener("click", () => playOneSound(shortsoundEl, rollSoundEl));

编辑

这是一个link to a working codesandbox。

我认为它不起作用的原因是因为我之前打错了字：

soundToPlay.paused？ soundToPlay.play() : soundPlay.pause()

应该是：

soundToPlay.paused？ soundToPlay.play() : soundToPlay.pause()

P.S.

由于（新的）浏览器规范，必须先刷新页面才能播放页面中嵌入的声音。

我如何使用布尔值来停止一首音乐，而另一首音乐正在播放

How do I use a bolean to stop one music while the other plays

html

javascript

audio

boolean