从 Web 服务器的 HTML 资源中播放 FLAC

我正在运行一个 apache2 网站，您可以在其中上传无损文件，包括 .wav 和 .flac。 wav 文件可以立即使用，但不支持 flac。所以我想知道是否有什么方法可以在 JavaScript 的帮助下播放这些 flac 文件？

发生的情况如下：

1. 单击按钮选择文件。

2. 选择后，它会自动将 post 请求发送到名为“flac uploader.php”的 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. 然后 flacuploader.php 将 post 请求保存到文件夹“/lossless”，而不对文件进行任何更改。
4. 现在问题来了。我该怎么玩？

我四处搜寻并发现了这个：Flac.js - GitHub https://github.com/audiocogs/flac.js and 使用 SIP.js 和 Flac.js 通过 WebRTC 播放 FLAC 文件 https://www.wakamoleguy.com/2014/flac-over-webrtc-with-sipjs/。 但我认为这些来源错过了我的问题，因为我只是想将其解码为可播放的文件，或者使用 javascript 来完成这项工作。

我在 /lossless 中有一个名为 test.flac 的文件，我只是希望能够在 PHP/html 中播放该文件。它并不意味着完整的质量，而是上传的预览。但原始文件仍将按原样存储。

我尝试将其放入 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>

所以它不会播放声音。

任何事情都会有所帮助。

您不需要sip.js文件，如果您只想在浏览器中播放该文件。

要简单地播放 URL 中的文件，您可以使用fromURL创建播放器的方法。

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

这里有一个JSFiddle https://jsfiddle.net/28ppk74s/示例展示了它是如何工作的。

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()
})

您还可以使用FileReaderAPI 与readAsArrayBuffer读取器上将结果传递给的方法AV.Player.fromBuffer.

这里的JSFiddle https://jsfiddle.net/6yenx6vc/对于那个例子。

（抱歉，由于某种原因，示例在 SO 片段中不起作用，所以我必须使用 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)