html - 怎么让它停下来？！使用 onclick="this.firstChild.play()"

Question

我是一个超级菜鸟，正在为我的展览制作我的第一个 html 移动应用程序。我想做一个简单的语音导览，发现了这个

jsFiddle that suits my needs perfectly

http://jsfiddle.net/jackdent/3UXDH/3

但我不知道如何制作一个停止按钮来使用它。

能否请你帮忙？

Answer 1

您可以使用pause()停止它并删除 src。

演示

<div class="wrapper">
 <a onclick="trombone.play()" class="button"><audio id="trombone" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"></audio>&#9658;</a> Trombone
 <a onclick="trombone.pause()" class="button">Stop</a>
    
</div>

另一件事是，您不需要使用this.firstChild，而是可以通过 id 引用元素（提供 Audio 元素 anid或 className 以便您可以轻松引用它）

参考这里

查看参考文档中提供的这个示例

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>