Question

我想知道如何创建类似于本网站上的按钮，点击时会播放一个简短的音频文件。

https://www.theitalianexperiment.com/learn-italian/to-be

我知道如何使用该元素添加音频文件，但很想将它以按钮格式（例如添加到下面的代码）添加到文本的左侧，就像网站一样，这就是我坚持的内容。

HTML

  <tr>
  <td>Here <br> There</td>
  <td>Apa <br> Kuaka</td>
  </tr>

CSS

background-color:#f7f7f7 !important;
padding:20px !important;
border-radius:10px;
border:0px !important;
}

谢谢！

Answer 1

JavaScript 具有音频 play() 和 pause() 方法，我们可以用来重现这种行为。我使用这两种方法构建了下面的示例，并围绕它们构建了一个功能操作系统，这将允许您按媒体节点获取按钮，获取与按钮节点关联的媒体文件，并毫不费力地播放/暂停/停止媒体文件。< /p>

检查一下：

const isPlaying = media => !media.paused;
const play = media => (media.play(), getMediaGroupsByMedia(media).forEach(mgroup => mgroup.dataset.mediaState = "playing"));
const pause = media => (media.pause(), getMediaGroupsByMedia(media).forEach(mgroup => mgroup.dataset.mediaState = "paused"));
const stop = media => (media.pause(), media.currentTime = 0, getMediaGroupsByMedia(media).forEach(mgroup => mgroup.dataset.mediaState = "stopped"));
const allMedia = Array.from(document.querySelectorAll('audio, video'));
const allControls = Array.from(document.querySelectorAll('.media-control'));
const allMediaGroups = Array.from(document.querySelectorAll('.media-group'));
const getMediaByControl = control => allMedia.find(media => media.matches(control.dataset?.target));
const getControlsByMedia = media => allControls.filter(control => document.querySelector(control.dataset?.target) === media);
const getMediaGroupByControl = control => control.closest('.media-group');
const getMediaGroupsByMedia = media => getControlsByMedia(media).map(control => getMediaGroupByControl(control));
const stopAllMedia = () => allMedia.forEach(media => stop(media));

document.addEventListener('click', e => {
  if (e.target && allControls.includes(e.target)) {
    const control = e.target;
    const media = document.querySelector(control.dataset.target);
    if (isPlaying(media)) { stop(media); }
    else { stopAllMedia(); play(media); }
  }
});
document.addEventListener('ended', e => {
  if (e.target && allMedia.includes(e.target)) {
    const media = e.target;
    stop(media);
  }
});

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', sans-serif;
}
h1 {
  margin: 0 0 10px;
}
.media-group + .media-group {
  margin-top: 10px;
}
.media-group .media-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #546e7a;
  border: none;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.875);
  overflow: hidden;
  cursor: pointer;
}
.media-group .media-control::after {
  content: '▶';
  transform: rotate(0deg);
  transition: transform 0.15s ease-out;
  pointer-events: none;
}
.media-group[data-media-state="playing"] .media-control {
  background-color: #4caf50;
}
.media-group[data-media-state="playing"] .media-control::after {
  transform: rotate(90deg);
}

<h1>Audio Sample Previews</h1>
<div class="media-group" data-media-state="stopped">
  <span>Audio #1</span>
  <button class="media-control" data-target="#audio1"></button>
</div>
<div class="media-group" data-media-state="stopped">
  <span>Audio #2</span>
  <button class="media-control" data-target="#audio2"></button>
</div>


<audio id="audio1">
  <source src="https://assets.codepen.io/1580009/sample1.ogg" type="audio/ogg">
  <source src="https://assets.codepen.io/1580009/sample1.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<audio id="audio2">
  <source src="https://assets.codepen.io/1580009/sample2.ogg" type="audio/ogg">
  <source src="https://assets.codepen.io/1580009/sample2.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

单击时播放音频文件的按钮

1 个答案: