從HTML網頁服務器資源播放FLAC

Question

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

這裏是happends：

1. 點擊按鈕選擇文件。

2. 一旦選定，它將會被自動發送POST請求的PHP文件我命名爲「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. 然後flacuploader.php節省發佈請求到文件夾「/無損」在不改變文件。
4. 現在問題來了。我該如何播放它？

我搜索並發現了這個：Flac.js - GitHub和Playing a FLAC file over WebRTC with SIP.js and Flac.js。 但我認爲這些來源錯過了我的問題，因爲我只是想將其解碼爲可播放的文件，或者讓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)