当我从 ID 更改为 Class 时，为什么不播放声音？ [复制]答案

【问题标题】：Why does the sound not play when I change from an ID to a Class? [duplicate]当我从 ID 更改为 Class 时，为什么不播放声音？ [复制]
【发布时间】：2021-10-21 08:12:24
【问题描述】：

当按钮悬停时，我正在尝试使用 JS 播放音乐。我想使用类而不是 ID，但它似乎不起作用。

代码笔here

<audio id="heartbeat" src="https://css-tricks.com/examples/SoundOnHover/audio/beep.mp3" preload="auto">
        Your browser does not support the <code>audio</code> element.
    </audio>
    
    <div class="buttons">
      <button class="play">Play 1</button>
        <button class="play">Play 2</button>
      <button id="reset">Reset</button>
    </div>
    
        var playBtn = document.getElementsByClassName('play'),
      resetBtn = document.getElementById('reset'),
      hearbeat = document.getElementById('heartbeat')
        audios = document.querySelectorAll('audio');
    console.log(audios);
    
    
    playBtn.addEventListener('mouseover', function() {
    [].forEach.call(audios, function(audio) {
      // do whatever
      audio.play();
    });
    }, false);
    
    playBtn.addEventListener('mouseleave', function() {
      heartbeat.pause();
      heartbeat.currentTime = 0;
    }, false);
    
    resetBtn.addEventListener('mouseover', function() {
        heartbeat.play();
    }, false);
    
    resetBtn.addEventListener('mouseleave', function() {
      heartbeat.pause();
      heartbeat.currentTime = 0;
    }, false);

【问题讨论】：

标签： javascript html audio

【解决方案1】：

playBtn 是一个HTMLCollection。您需要将事件监听器添加到第一项：

var playBtn = document.getElementsByClassName('play'),
  resetBtn = document.getElementById('reset'),
  hearbeat = document.getElementById('heartbeat')
audios = document.querySelectorAll('audio');
console.log(audios);


playBtn[0].addEventListener('mouseover', function() {
  [].forEach.call(audios, function(audio) {
    // do whatever
    audio.play();
  });
}, false);

playBtn.addEventListener('mouseleave', function() {
  heartbeat.pause();
  heartbeat.currentTime = 0;
}, false);

resetBtn.addEventListener('mouseover', function() {
  heartbeat.play();
}, false);

resetBtn.addEventListener('mouseleave', function() {
  heartbeat.pause();
  heartbeat.currentTime = 0;
}, false);

<audio id="heartbeat" src="https://css-tricks.com/examples/SoundOnHover/audio/beep.mp3" preload="auto">
        Your browser does not support the <code>audio</code> element.
    </audio>

<div class="buttons">
  <button class="play">Play 1</button>
  <button class="play">Play 2</button>
  <button id="reset">Reset</button>
</div>

【讨论】：