How to make it stop?! using onclick="this.firstChild.play()"

Question

I am a super noob making my first html mobile app for my exhibition. I want to make a simple audio tour and found this

jsFiddle that suits my needs perfectly

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

But I don't know how to make a stop button to work with it.

Could you please help?

Answer 1

You can use pause() to stop it and remove src.

Demo

<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>

Another thing is, you don't need to use this.firstChild, instead you can just refer to the element by id(provide the Audio element an id or className so that you can refer to it easily)

Reference Here

Look at this example provided in the reference document

<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>