Avec un peu de javascript, vous pouvez faire un tour de passe-passe
Voici un exemple échantillon , un autre un
jQuery(function($) {
var supportsAudio = !!document.createElement('audio').canPlayType;
if(supportsAudio) {
var index = 0,
playing = false;
mediaPath = 'http://jonhall.info/how_to/assets/media/audio/',
extension = '',
tracks = [
{"track":1,"name":"Happy Birthday Variation: In the style of Beethoven","length":"00:55","file":"01_Happy_Birthday_Variation_In_The"},
{"track":2,"name":"Wedding March Variation 1","length":"00:37","file":"02_Wedding_March_1"},
{"track":3,"name":"Happy Birthday Variation: In the style of Tango","length":"01:05","file":"03_Happy_Birthday_Variation_In_The"},
{"track":4,"name":"Wedding March Variation 2","length":"00:40","file":"04_Wedding_March_2"},
{"track":5,"name":"Random Classical","length":"00:59","file":"05_AFI_com"}
],
trackCount = tracks.length,
npAction = $('#npAction'),
npTitle = $('#npTitle'),
audio = $('#audio1').bind('play', function() {
playing = true;
npAction.text('Now Playing:');
}).bind('pause', function() {
playing = false;
npAction.text('Paused:');
}).bind('ended', function() {
npAction.text('Paused:');
if((index + 1) < trackCount) {
index++;
loadTrack(index);
audio.play();
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}).get(0),
btnPrev = $('#btnPrev').click(function() {
if((index - 1) > -1) {
index--;
loadTrack(index);
if(playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}),
btnNext = $('#btnNext').click(function() {
if((index + 1) < trackCount) {
index++;
loadTrack(index);
if(playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}),
li = $('#plUL li').click(function() {
var id = parseInt($(this).index());
if(id !== index) {
playTrack(id);
}
}),
loadTrack = function(id) {
$('.plSel').removeClass('plSel');
$('#plUL li:eq(' + id + ')').addClass('plSel');
npTitle.text(tracks[id].name);
index = id;
audio.src = mediaPath + tracks[id].file + extension;
},
playTrack = function(id) {
loadTrack(id);
audio.play();
};
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
loadTrack(index);
}
$('#useLegend').click(function(e) {
e.preventDefault();
$('#use').slideToggle(300, function() {
$('#useSpanSpan').text(($('#use').css('display') == 'none' ? 'show' : 'hide'));
});
});
});
<link href="http://jonhall.info/examples/html5_audio_playlist_example.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" role="main">
<div id="cwrap">
<div id="nowPlay" class="is-audio">
<h3 id="npAction">Paused:</h3>
<div id="npTitle"></div>
</div>
<div id="audiowrap">
<div id="audio0">
<audio id="audio1" controls="controls">
Your browser does not support the HTML5 Audio Tag.
</audio>
</div>
<noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript>
<div id="extraControls" class="is-audio">
<button id="btnPrev" class="ctrlbtn">|<< Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track >>|</button>
</div>
</div>
<div id="plwrap" class="is-audio">
<div class="plHead">
<div class="plHeadNum">#</div>
<div class="plHeadTitle">Title</div>
<div class="plHeadLength">Length</div>
</div>
<div class="clear"></div>
<ul id="plUL">
<li class="plItem">
<div class="plNum">1</div>
<div class="plTitle">Happy Birthday Variation: In the style of Beethoven</div>
<div class="plLength">0:55</div>
</li>
<li class="plItem">
<div class="plNum">2</div>
<div class="plTitle">Wedding March Variation 1</div>
<div class="plLength">0:37</div>
</li>
<li class="plItem">
<div class="plNum">3</div>
<div class="plTitle">Happy Birthday Variation: In the style of Tango</div>
<div class="plLength">1:05</div>
</li>
<li class="plItem">
<div class="plNum">4</div>
<div class="plTitle">Wedding March Variation 2</div>
<div class="plLength">0:40</div>
</li>
<li class="plItem">
<div class="plNum">5</div>
<div class="plTitle">Random Classical</div>
<div class="plLength">0:59</div>
</li>
</ul>
</div>
</div>
</div>
