Volumebar und Mute Button für Audio Player

[GvS]

Hallo, für meinen Audio Player auf meiner Homepage http://gvs-querfunk.de/lfm/dixie.html
verwende ich folgenden Code:

<audio id="player" src="http://stream.laut.fm/gvs-querfunk"></audio>
<div id="playpause"><img src="images/play.png" width="100" onclick="playpause(this);"></div>
<div id="plus"><img src="images/volplus.png" width="70" onclick="document.getElementById('player').volume += 0.1"></div>
<div id="min"><img src="images/volmin.png" width="70" onclick="document.getElementById('player').volume -= 0.1"></div>
<script>
function playpause(ob) {
  player = document.getElementById('player');
  if (player.paused) {
player.load();
player.play();
  ob.src = 'images/pause.png';
  } else {
  player.pause();
  ob.src = 'images/play.png';
  }
}
</script>

Funktioniert auch soweit, aber ich würde gerne die Lautstärkeregelung statt über Buttons mit einem Schieberegler steuern.
Darüber hinaus hätte ich auch gerne einen Mute Button. Für diesen würde ich dann gerne 2 Images verwenden (mute.png, nomute.png).

Für den Schieberegler und den Standard Mute Button habe ich folgenden Code gefunden:

<button type="button" id="mute">Mute</button>
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">

// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;

// Update the button text
muteButton.innerHTML = "Unmute";
} else {
// Unmute the video
video.muted = false;

// Update the button text
muteButton.innerHTML = "Mute";
}
});

// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
// Update the video volume
video.volume = volumeBar.value;
});

Alle Versuche, den Schieberegler und den Mute Button funktionsfähig zu bekommen sind bisher fehlgeschlagen.
Könnte mir bitte jemand den angepassten Code hier posten ? Wenn möglich bitte wie oben beschrieben mit Images für Mute und Startlautstärke 20%