從HTML中的Web服務器資源播放FLAC

Question

我正在運行一個apache2網站，您可以在其中上傳.wav和.flac等無損文件。 不支持flac時，wav文件可立即工作。 所以我想知道是否有任何方法可以在JavaScript的幫助下播放這些flac文件？

這是發生了什么：

1. 點擊按鈕選擇文件。

2. 選擇后，它將自動將發布請求發送到名為“ flacuploader.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將發布請求保存到文件夾“ / lossless”，而對該文件沒有任何更改。
4. 現在這是問題所在。 我該怎么玩？

我到處搜索並遇到了這個問題： Flac.js-GitHub和使用SIP.js和Flac.js在WebRTC 上 播放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示例，顯示了其工作原理。

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

您還可以將FileReader API與讀取器上的readAsArrayBuffer方法一起使用，以將結果傳遞給AV.Player.fromBuffer 。

這里是該示例的JSFiddle 。

（抱歉，示例由於某種原因在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)