Audio Player

<audio id="player" src="http://stream.laut.fm/gvs-querfunk"></audio>
<div id="playpause">
    <img src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" width="64" height="64" onclick="playpause(this);"/>
</div>
<div id="mute">
    <img src="https://cdn1.iconfinder.com/data/icons/material-audio-video/18/volume-up-128.png" width="64" height="64" onclick="mute(this);"/>
</div>
<div id="volume">
    <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="0.2" onchange="volume(this);"/>
</div>
<script>
    document.getElementById('player').volume = 0.2;
    function playpause(ob) {
        player = document.getElementById('player');
        if (player.paused) {
            player.load();
            player.play();
            ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-64.png';
            }
            else {
                player.pause();
                ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png'; }
                }

    function mute(ob) {
        if (player.muted) {
            player.volume = 1;
            player.muted = 0;
            ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/18/volume-up-128.png';
            }
            else {
                player.muted = 1;
                ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/19/volume-off-128.png'; }
                }

    function volume(ob) {
        document.getElementById('player').volume = document.getElementById('volume-bar').value;
    }
</script>