play FLAC from resources of web server in HTML

Question

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 there is any way to play these flac files with some help of JavaScript?

Here is what happends:

1. Click button to choose file.

2. Once chosen, it will automaticly send post request to a PHP file i named "flacuploader.php"

   <form action="flacuploader.php" method="post" enctype="multipart/form-data">
       <div class="choose_file">
           <span style="cursor: pointer;">Upload Lossless File...</span>
           <input style="cursor: pointer;" type="file" name="fileToUpload" accept=".flac,.wav,.aiff,.iff,.riff" onchange="javascript:this.form.submit();">
       </div>
   </form>
   

3. Then flacuploader.php saves the post request to a folder "/lossless" with no changes to the file.
4. Now here is the problem. How do I play it?

I search around and came across this: Flac.js - GitHub and Playing a FLAC file over WebRTC with SIP.js and Flac.js. But I think those sources missed my question because I simply want to decode it to a playable file, or have javascript to do the job.

I have a file in /lossless called test.flac, and I simply want to be able to play that file in PHP/html. It is not meant to be full quality, but rather a preview of the upload. But the original file will still be stored as it is.

I tried putting this in the flacuploader.php:

<script src="js/aurora.js"></script>
<script src="js/flac.js"></script>
<script src="js/sip.js"></script>

<script>
    var player = AV.Player.fromFile("lossless/test.flac");
    player.play();
</script>

And so it wouldn't play the sound.

Anything will help.

Answer 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)