CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-audio
Sarthak Singhal
Sarthak Singhal

Reputation: 161

Change source on audio end [multiple audios] JS & jQuery

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Music</title>
<script src="scripts/jquery.js"></script>
<script>
    function myFunction(){
    var a = document.createElement("audio");
    a.controls = true;
    a.setAttribute("id", "au");
    a.setAttribute("onended", "myFunc()");
    document.body.appendChild(a);
    var b = document.createElement("source");
    b.src = "assets/Playlists/Luis Fonsi Daddy Yankee - Despacito (Audio).mp3"
    a.appendChild(b);
    a.play()
    }
</script>
<script>
    function myFunc(){
        var myArray = ["assets/Playlists/Andra -Why.mp3","assets/Playlists/Ed Sheeran - Shape of You [Official Video].mp3","assets/Playlists/Ariana Grande - Side To Side ft. Nicki Minaj.mp3"];
        var randum = myArray[Math.floor(Math.random() * myArray.length)];
        $("audio").src = randum;

        //Its where I am stuck


    }
</script>
</head>
<body onLoad="myFunction()">
</body>
</html>

When "Despacito" (song) ends I want a random song picked up and that the (created element audio) source is changed accordingly, is there any way? myfunction() works well but the onend is not working…

Upvotes: 2

Views: 342

Answers (2)

Alicia Sykes
Alicia Sykes

Reputation: 7067

Here's a working JSFiddle

// Plays random song from array
function playNextRandom(){
  const allSongs = [
    "http://www.noiseaddicts.com/samples_1w72b820/281.mp3",
    "http://www.noiseaddicts.com/samples_1w72b820/4939.mp3"
  ];
  const randomIndex = allSongs[Math.floor(Math.random() * allSongs.length)];
  $("audio").src = randomIndex;
}

// Executed when document has loaded    
$(document).ready(function(){    

  // Append audio element
  const audioElement = document.createElement("audio");
  audioElement.controls = true;
  audioElement.setAttribute("id", "au");
  document.body.appendChild(audioElement);
        
  // Append Audio source
  const audioSource = document.createElement("source");
  audioSource.src = "http://www.noiseaddicts.com/samples_1w72b820/4927.mp3"
  audioElement.appendChild(audioSource);
  audioElement.play()
  audioSource.setAttribute("onended", "playNextRandom");

})

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

  • Set your Array outside of your functions,
  • Name your variables and functions in a more descriptive manner
  • You don't necessarily need the source child
  • Suggestion: manipulate in-memory Elements attributes and stuff before appending them to the DOM, not after. 

var songs = [
  "https://upload.wikimedia.org/wikipedia/en/6/6d/Run_On_%28Elvis_Presley_song_-_sample%29.ogg#t=20",
  "https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=17",
  "https://upload.wikimedia.org/wikipedia/en/e/e0/Dreaming_%28Scribe_song_-_sample%29.ogg#t=20"
];

function createPlayer() {
  var a = document.createElement("audio");
  a.controls = true;
  a.setAttribute("id", "au");
  a.addEventListener("ended", playRandomSong);
  // set the src directly to Audio Element
  a.src = "https://upload.wikimedia.org/wikipedia/en/6/6d/Run_On_%28Elvis_Presley_song_-_sample%29.ogg#t=20";

  document.body.appendChild(a);
  a.play();
}

function playRandomSong() {
  // this refers to the Audio Element
  this.src = songs[Math.floor(Math.random() * songs.length)];
  this.play();
}

createPlayer(); // START!!

P.S: I used the src #t=SEC suffix - so you don't have to wait for the whole song to see the example work ;)

Upvotes: 3

Related Questions