Play FLAC From Resources Of Web Server In HTML

I'm running an apache2 website where you are able to upload lossless files including .wav and .flac. wav files works right away while flac is not supported. So I was wondering if t

Solution 1:

You do not need the sip.js file if you only want to play the file in the browser.

To simply play a file from a URL you can use the fromURL method to create your player.

var player = AV.Player.fromURL(url);

Here is a JSFiddle example showing how that works.

HTML

<button id="play">Play</button>
<button id="pause">Pause</button>

JavaScript

var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pause');
var url = "https://upload.wikimedia.org/wikipedia/commons/5/5e/Debussy_-_Pour_les_accords.flac"
var player = AV.Player.fromURL(url);

playBtn.addEventListener('click', function() {
  player.play()
})

pauseBtn.addEventListener('click', function() {
  player.pause()
})

You could also use the FileReader API with the readAsArrayBuffer method on the reader to pass the result to AV.Player.fromBuffer.

Here the JSFiddle for that example.

( Sorry, the examples for some reason did not work in SO snippets, so i have to use JSFiddle )

HTML

<input type="file" id="file-input" />
<button>play</button>

CSS

input {
  display: block;
  margin-bottom: 6px;
}
button {
  display: none
}

JavaScript

var $fileInput = $('#file-input');
var $btn = $('button');
var isPlaying = false;
var player;

function readFile(e) {
  if(window.FileReader) {
    var file  = e.target.files[0];
    var reader = new FileReader();
    if (file && file.type.match('audio/flac')) {
      reader.readAsArrayBuffer(file);
    } else {
      console.log('Please add a flac file.')
    }
    reader.onloadend = function (e) {
      player = AV.Player.fromBuffer(reader.result)
      $btn.show()
      $btn.on('click', function() {
        if(isPlaying) {
          player.pause();
          isPlaying = false;
          this.textContent = 'play'
        } else {
          player.play();
          isPlaying = true;
          this.textContent = 'pause'
        }
      })
    }
  }
}

$fileInput.on('change', readFile)