m3u8 format Support

[naumanahmed19]

Currently player does not support the m3u8 format

A possible solution can be found here
katspaugh/wavesurfer.js#1078

[salginci]

This is how I made it working. I was using online radio stream.
I removed playpause button click event in main.js file. and I added this in to player area(header-player.php).

<audio id="radioplayer" src='https://myawesomeradyostream.m3u8' style="display:none;" controls></video>
 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent alpha version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->

<style>

#previousTrack
{
    display:none;
}
#nextTrack
{
    display:none;
}
</style>

<script>
  var video = document.getElementById('radyoplayer');
 
  var videoSrc = 'https://myawesomeradyostream.m3u8';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
 
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
  }
   
  var isPlaying=false;
  
  jQuery(document).ready(function ($) {

  var playPause = document.querySelector("#playPause");
      playPause.addEventListener("click", function (e) {
          e.preventDefault();
          
          if (isPlaying==false)
          {
              console.log('playin');
               document.querySelector("#play").style.display = "none";
          document.querySelector("#pause").style.display = "";
          video.play();
          
          $(".music_pseudo_bars").show();
          } else
          
          {
                video.pause();
              console.log('not playing');
                document.querySelector("#play").style.display = "";
          document.querySelector("#pause").style.display = "none";
          $(".music_pseudo_bars").hide();
          }
           
          isPlaying=!isPlaying;
          
          
          return;
          
      });
  });
  
</script>
```
`