<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>

<script>
jQuery(document).ready(function( $ ) {
    $("audio").on("play", function (me) {
        $("audio").each(function (i,e) {
            if (e !== me.currentTarget) {
                this.pause();
                this.currentTime = 0;
            }
        });
    });
})

function play(e) {
    var de = document.getElementById(e);

    var div = document.getElementsByClassName('playlist_container')[0];

    // alle Buttons löschen
    var number = div.getElementsByTagName('input').length;
    for (var i = 0, n = number; i < n; i++){
        div.getElementsByTagName('input')[i].style.background="none";
    }

    if (de.paused) {
        // Cachen eines streams vermeiden: (nur, wenn die JavaScript Funktionalität verwendet wird, und nicht, wenn die nativen audio-controls benutzt werden)
        url = de.src.split("?")[0];
        var de1 = url  + "?" + new Date().getTime();
        document.getElementById(e).src = de1;

        // aktiven Sender mit einem Button kennzeichnen:
        div.getElementsByTagName('input')[e-1].style.background="url('aktiv.png') no-repeat 2px 2px / 12px";

        de.play();
        de.style.display="block";
        de.onended = function (){
            if (document.getElementById(e+1)) {
                play(e+1);
            } else {
                play(1);
            }
        }
    } else {
        de.pause();
    }
}
</script>

<style>

.song {clear:left; margin:1 0;}
.song input {margin: 0 1em .5em 0;float:left;padding:0;}
.song p {margin:0 0 1.5em 0;}
.song:after {
    content : ".";
    display : block;
    height : 0;
    clear : left;
    visibility : hidden;
}

audio{ margin:0;min-width:0}

@media only screen and (min-device-width:768px) {
    audio{max-width:75%;}
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    audio{max-width:10em;}
}

</style>

<div class="playlist_container">
    <div class = "song" onclick="play(1)">
        <input type="image" src="FFH.jpg" width="100" height="100" alt="Stream: FFH">
        <h3>FFH</h3>
        <audio style="display:none" id ="1" src="https://mp3.ffh.de/radioffh/hqlivestream.mp3?nocache=7993c31387446a194a31d3ed34b97fc0"  preload="none" >
        </audio>
        <p> Das Ganze funktioniert natürlich auch mit einem Stream.
    </div>

    <div class = "song" onclick="play(2)">
        <input type="image" src="RPR1.jpg" width="100" height="100" alt="Stream: RPR 1">
        <h3>RPR 1</h3>
        <audio style="display:none" id ="2" src="https://streams.rpr1.de/rpr-simulcast-128-mp3?usid=0-0-H-M-V-06"  preload="none" >
        </audio>
        <p> ... und mit beliebig vielen Streams.
    </div>
</div>