如何使用布尔值在另一种音乐播放时停止一种音乐

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()

附言

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