<HTML><Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "Dongfeng"> <title></title> <Script> varmusics= [ '1.mp3', '2.mp3', '3.mp3', '4.mp3', '2.mp3'];//defines the index of the audio being playedvarIndex= 0;//sequence of records and random variablesvarPlaytype;window.onload= function() { varTypesel=document.getElementById ('Typesel'); //change the playback mode when the user changes the drop-down menu optionTypesel.onchange= function() {console.log (typesel.value) Window.playtype=Typesel.value; } varplayer=document.getElementById ('player'); //the first file that plays when a page loadsplayer.src=Musics[index]; Player.addeventlistener ( 'ended', myFunction) functionmyFunction () {if(Playtype = = ' Random ') {Index=Math.floor (Math.random ()*musics.length); Console.log (index) PLAYER.SRC=Musics[index]; } Else { //Play next Audioplayer.src=musics[++Index%Musics.length]} player.play (); }} </Script> <style>#typeSel{Margin-bottom:30px;width:160px;}</style></Head><Body><H2>Music player</H2><SelectID= "Typesel"> <optionvalue= "sequence">Sequential playback</option> <optionvalue= "random">Random Play</option></Select><BR/><AudioID= "Player"Controls>Your browser does not support the audio element</Audio></Body></HTML>
The Onended method in audio does not know how to use the,<element onended= "myScript" > and Objectonly with the event listener method. onended= function () {myScript}; none works, only object. AddEventListener ("ended", myScript);
A simple music player with JS implementation