创建一个创建声音 HTML 的图像按钮答案

【问题标题】：Creating an Image Button that Creates a Sound HTML创建一个创建声音 HTML 的图像按钮
【发布时间】：2017-07-25 18:27:43
【问题描述】：

您好，我目前正在尝试让（扬声器的）图像按钮为我播放音频文件。

<p><br></p>
<table>
<tbody><tr>
<th> Quick Clicks </th> 
<td style="text-align: center;">
<a href="#3" onclick=""><img src="https://zingtree-uploads.s3.amazonaws.com/images/59777e50293d71.47898028-416750-speaker.png" style="width: 145px; height: 145px;"></a>
</td>
<td style="text-align: center;">
<a href="#3" onclick="do_button_click(14, 7, 'Quick Clicks',0);"><img src="https://zingtree-uploads.s3.amazonaws.com/images/59777e50293d71.47898028-486417-Quick+Clicks.png" style="width: 145px; height: 145px;" ></a>
</td>
</tr>
</tbody></table>

这是我想要使用的两张图片，我想让第一个按钮播放这个音频文件：

<a class="btn btn-lg btn-zingtree btn-block btn-primary" onclick="this.firstChild.play()"><audio src="https://thorswrench-my.sharepoint.com/personal/christiaan_karsavior_com/Documents/database%20media/sounds/dead%20battery%20clicking.mp3"></audio>Play</a>`enter code here`

抱歉，我知道在某个地方一定有解决方案，但我找不到。

【问题讨论】：

标签： html image button audio

【解决方案1】：

如果您想在<audio> 上触发play()，最基本的情况是您只需要找到元素并设置一个调用play() 的函数。您可以在<body> 底部的<script> 标记中设置它，如果您愿意，可以从onclick 调用它。

let au = document.getElementsByTagName('audio')[0]
function playAu() {
  au.play()
}

<audio> 元素只需要在页面上的某个地方。如果有多个音频，您需要为它们提供 ID 并单独选择它们。如果您尝试播放的文件（源）有问题，您会在控制台中看到。

【讨论】：