How to make play/stop buttons for iframe audio?

1
2

<button id="playButton">Play</button>
<button id="stopButton">Stop</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var audioPlayer = document.getElementById('audioPlayer');
var playButton = document.getElementById('playButton');
var stopButton = document.getElementById('stopButton');

playButton.addEventListener('click', function() {
  audioPlayer.contentWindow.postMessage('play', '*');
});

stopButton.addEventListener('click', function() {
  audioPlayer.contentWindow.postMessage('stop', '*');
});

1

<iframe id="audioPlayer" src="url_to_your_audio_file"></iframe>

1
2
3
4
5
6
7
8

window.addEventListener('message', function(event) {
  if (event.data === 'play') {
    audio.play();
  } else if (event.data === 'stop') {
    audio.pause();
    audio.currentTime = 0;
  }
});