单击时播放音频文件的按钮[重复]

Posted 2023-02-24

【中文标题】单击时播放音频文件的按钮[重复]

【英文标题】：Buttons that play audio files when clicked on [duplicate]

【发布时间】：2021-04-13 13:05:14

【问题描述】：

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

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;

谢谢！

【问题讨论】：

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。

@Tola 请检查我的解决方案，如果它适合您，请考虑接受我的解决方案。如果您希望我更新我的解决方案，请告诉我。

嘿布兰登，我稍微调整了你的代码，现在它可以工作了。非常感谢，我也更新了您的解决方案。

@Tola 很高兴听到这对您有用！我也很想看看你的调整

【参考方案1】：

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

检查一下：

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>