How to load a playlist in a wavesurfer instance
I am new to development. I want to load an audio file into a wave surfer instance when I click it. My code is working well with the default browser player, but not with wavesurfer player. wavesurfer is only playing 1 file.
I am using the wavesurfer library to generate the audio peak image.
here is my code:
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .audioplayer { display: flex; flex-direction: row; box-sizing: border-box; margin: 0em 0; padding: 0 10% 0 10% ; width:100%; height: 96px; align-items: center; background: #0d0d0d; z-index: 44; position: fixed; left: 0px; bottom: 0px; overflow: visible; } #playlist{ list-style: none; } #playlist li a{ color: whitesmoke; text-decoration: none; background-color: #161616; } #playlist .current-song a{ color: blue; } </style> </head> <body> <audio src="" controls id="audioPlayer"> Sorry your brower does not support HTML5!</audio> <ul id="playlist"> <?php $fileDir = "audios"; $files = scandir($fileDir); foreach($files as $file) { if(substr($file,-4) == ".mp3"){ echo "<li><a href='$fileDir/$file'>".substr($file,0,-4)."</a></li>"; } } ?> </ul> <script src="css/wavesurfer.js"></script> <div id="waveform" style="width: 75%"></div> <div class="controls"> <button class="btn btn-primary" onclick="wavesurfer.skipBackward()"> <i class="fa fa-step-backward"></i> Backward </button> <button class="btn btn-primary" onclick="wavesurfer.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause </button> <button class="btn btn-primary" onclick="wavesurfer.skipForward()"> <i class="fa fa-step-forward"></i> Forward </button> <button class="btn btn-primary" onclick="wavesurfer.toggleMute()"> <i class="fa fa-volume-off"></i> Toggle Mute </button> </div> <script> /* var wavesurfer = WaveSurfer.create({ container: '#waveform', partialRender: true, waveColor: '#666666', cursorWidth: 0, barGap: 1.5, barWidth: 1.8, barHeight:0.8, backgroundColor: 'black', progressColor: 'whitesmoke' }); wavesurfer.load('audios/15.mp3'); wavesurfer.on('ready', function () { // wavesurfer.play(); }); </script> <script src="css/jquery-3.1.1.min.js"></script> <script> // loads the audio player WaveSurfer(); function audioPlayer(){ var currentSong = 0; $("#audioPlayer")[0].src = $("#playlist li a")[0]; $("#playlist li a").click(function(e){ e.preventDefault(); $("#audioPlayer")[0].src = this; $("#audioPlayer")[0].play(); $("#playlist li").removeClass("current-song"); currentSong = $(this).parent().index(); $(this).parent().addClass("current-song"); }); //event listener goes to the next song $("#audioPlayer")[0].addEventListener("ended", function(){ currentSong++; if(currentSong == $("#playlist li a").length) currentSong = 0; $("#playlist li").removeClass("current-song"); $("#playlist li:eq("+currentSong+")").addClass("current-song"); $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href; $("#audioPlayer")[0].play(); }); } </script> </body> </html>``` 
