I am trying to create a shuffle mode for multiple playlists with the native html5 audio player. I am not that great with javascript i am more of a web designer and not developer. I cannot find anything on creating a shuffle mode online so I figured I would ask the question here and see if someone can help. I have multiple playlists and would like to create a shuffle mode for each individual playlist and load it into the one audio player. Is this possible with javascript or jquery? Here is my code that I have for my audio playlists.
<audio id="player" controls="controls">
<source src="#" type="audio/ogg">
<source src="#" type="audio/mp3">
</audio>
<ul class="playlist">
<li><button class="music-button" onclick='track1()'>Track1</button </li>
<li><button class="music-button" onclick='track2()'>Track2</button </li>
<li><button class="music-button" onclick='track3()'>Track3</button </li>
</ul>
<ul class="playlist2">
<li><button class="music-button" onclick='track1()'>Track1</button </li>
<li><button class="music-button" onclick='track2()'>Track2</button </li>
<li><button class="music-button" onclick='track3()'>Track3</button </li>
</ul>
<script>
function track1(){
var player=document.getElementById('player');
var sourceOgg=document.getElementById('player');
var sourceMp3=document.getElementById('player');
sourceOgg.src='url.ogg';
sourceMp3.src='url.mp3';
player.load();
player.play();
}
function track2(){
var player=document.getElementById('player');
var sourceOgg=document.getElementById('player');
var sourceMp3=document.getElementById('player');
sourceOgg.src='url.ogg';
sourceMp3.src='url.mp3';
player.load();
player.play();
}
function track3(){
var player=document.getElementById('player');
var sourceOgg=document.getElementById('player');
var sourceMp3=document.getElementById('player');
sourceOgg.src='url.ogg';
sourceMp3.src='url.mp3';
player.load();
player.play();
}
</script>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…