JSFiddle - React, Tailwind, and code Playground

by johnhoffman

HTML

<span id="currentVolume"></span><br><br>

<span id="printDuration">Duration</span><br>
<span id="printCurrentTime">Current Time</span><br>
<span id="pause">Pause</span><br>
<span id="play">Play</span><br>
<span id="increaseVolume">Increase Volume</span><br>
<span id="decreaseVolume">Decrease Volume</span><br>
<span id="mute">Mute</span><br>
<span id="unmute">Unmute</span><br>
<span id="increasePlaybackSpeed">Increase Playback Speed</span><br>

JavaScript

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://upload.wikimedia.org/wikipedia/commons/6/65/Star_Spangled_Banner_instrumental.ogg');
audioElement.play();

document.getElementById("printDuration").onclick = function() {
  alert(audioElement.duration);
}

document.getElementById("printCurrentTime").onclick = function() {
  alert(audioElement.currentTime);
}

document.getElementById("pause").onclick = function() {
  audioElement.pause();
}
    
document.getElementById("increaseVolume").onclick = function() {
  audioElement.volume += 0.1;
  document.getElementById("currentVolume").innerHTML = audioElement.volume;
}
    
document.getElementById("decreaseVolume").onclick = function() {
  audioElement.volume -= 0.1;
  document.getElementById("currentVolume").innerHTML = audioElement.volume;
}

document.getElementById("play").onclick = function() {
  audioElement.play();
}
    
document.getElementById("mute").onclick = function() {
  audioElement.muted = true;
}

document.getElementById("unmute").onclick = function() {
  audioElement.muted = false;
}

document.getElementById("increasePlaybackSpeed").onclick = function() {
  audioElement.playbackRate += 0.1;
}