在HTML中从web服务器资源中播放FLAC

Question

我运行一个apache2网站，您可以上传无损文件，包括.wav和.flac。wav文件可以立即工作，而flac不受支持。所以我想知道是否有办法在JavaScript的帮助下播放这些flac文件？

以下是所发生的事情：

1. 单击按钮选择文件。
2. 一旦被选中，它将自动向我命名为"flacuploader.php“的PHP文件发送post请求。
3. 然后，flacuploader.php将post请求保存到文件夹"/lossless“，而不对文件进行任何更改。
4. 现在问题就在这里。我该怎么弹？

我四处搜索，发现了这样的情况：Flac.js - GitHub和在WebRTC上使用SIP.js和Flac.js播放FLAC文件。但我认为这些消息来源忽略了我的问题，因为我只是想把它解码成一个可播放的文件，或者让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>

这样它就不会播放声音了。

一切都会有帮助的。

Answer 1

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

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

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

下面是一个JSFiddle示例，说明了它是如何工作的。

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

您还可以在读取器上使用FileReader API和readAsArrayBuffer方法将结果传递给AV.Player.fromBuffer。

这里是这个例子的JSFiddle。

(对不起，由于某些原因，这些示例在这样的片段中不起作用，所以我不得不使用JSFiddle )

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