I have some audio files in an array list and I want my code to have two buttons: one which will play and pause the song and one which will randomise the song from the array list. Im trying to do this by calling functions but it isn't working in the way i want it to. when i load the page, the rand variable will choose a song from the audioPlaying array list and i can play and pause it with no issues. however i want the randomise button to randomly pick another song and play that but i have no idea how id go about that. ive commented out the eventlistener for the randomise button as im not sure how id get it to work. can anyone help?
HTML:
<audio id="mytrack" controls>
<source src="Song1.wav" type = "audio/wav"/>
</audio>
<audio id="gd" controls>
<source src="Song2.mp3" type = "audio/mp3"/>
</audio>
<button type="button" id="playButton"></button>
<button type="button" id="randomise"></button>
JavaScript:
var mytrackJS = document.getElementById('mytrack');
var playButtonJS = document.getElementById('playButton');
var randomiseJS = document.getElementById('randomise');
var gdJS = document.getElementById('gd');
var audioPlaying = [mytrackJS, gdJS];
var rand = audioPlaying[Math.floor(Math.random() * audioPlaying.length)];
playButtonJS.addEventListener('click', play, false);
/*randomiseJS.addEventListener('click', play, false);*/
function play() {
randomA(audioPlaying);
playOrPause(rand);
}
function randomA(song) {
var rand = audioPlaying[Math.floor(Math.random() *
audioPlaying.length)];
return audioPlaying[rand];
}
function playOrPause(audio) {
if (!audio.paused && !audio.ended) {
audio.pause();
playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
}
else {
audio.play();
playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
}
}
Aucun commentaire:
Enregistrer un commentaire