Musique sur site web + boutons

<audio src="music.mp3" preload="auto" id="player"></audio>

<div id="player_interface">
    <img src="vol_min.jpg" alt="-" />
    <img src="play.jpg" alt="Play/Pause" />
    <img src="vol_plus.jpg" alt="+" />
    <div id="vol">Volume: <span>100%</span></div>
</div>

<script type="text/javascript">
var images = document.getElementById('player_interface').getElementsByTagName('img');
var player = document.getElementById('player');
var volume_span = document.getElementById('player_interface').getElementsByTagName('span').item(0);
var c_volume = 100;

var volume_min = images[0];
var volume_plus = images[2];
var play = images[1];

play.onclick = function() {
    if(player.paused) {
        player.play();
    } else {
        player.pause();
    }
};

volume_min.onclick = function() {
    c_volume -= 5;
    if(c_volume < 0) c_volume = 0;
     
    player.volume = parseFloat(c_volume / 100);
    volume_span.innerHTML = c_volume+"%";
};

volume_plus.onclick = function() {
    c_volume += 5;
    if(c_volume > 100) c_volume = 100;
     
    player.volume = parseFloat(c_volume / 100);
    volume_span.innerHTML = c_volume+"%";
};
</script>

<audio src="Kaamelott.mp3" preload="auto" id="player"></audio>

<div id="player_interface">
    <img src="vol-.jpg" alt="-" />
    <img src="play-pause.jpg" alt="Play/Pause" />
    <img src="vol+.jpg" alt="+" />
    <div id="vol">Volume: <span>100%</span></div>
</div>

<audio src="sound/Kaamelott.mp3" preload="auto" id="player"></audio>

<div id="player_interface">
    <img src="player_interface/vol-.jpg" alt="-" />
    <img src="player_interface/play-pause.jpg" alt="Play/Pause" />
    <img src="player_interface/vol+.jpg" alt="+" />
    <div id="vol">Volume: <span>100%</span></div>
</div>