HTMLでWebサーバのリソースからFLACを再生

Question

私はapache2ウェブサイトを実行しています。ここでは、.wavと.flacを含むロスレスファイルをアップロードできます。 flacはサポートされていませんが、wavファイルはすぐに動作します。だから私はJavaScriptの助けを借りてこれらのflacファイルを再生する方法があるのだろうかと思っていたのですか？ここで

はhappendsです：

1. は、ファイルを選択し、ボタンをクリックします。

2. 一度選ばれ、それが自動にPHPファイルへのPOSTリクエストを送信します、私は「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はを変更することなく、フォルダ「/ロスレス」にPOSTリクエストを節約ファイル。
4. ここに問題があります。どのようにプレイするのですか？

Flac.js - GitHubとPlaying a FLAC file over WebRTC with SIP.js and Flac.jsを検索しています。 しかし、私はそれらのソースが私の質問を逃したと思う、私は単に再生可能なファイルにデコードしたい、または仕事をするためのjavascriptを持っていたいからだ。

私はtest.flacという名前の/ losslessファイルを持っています。そのファイルを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); 

これはどのように動作するかを示す例です。

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

あなたはまたAV.Player.fromBufferに結果を渡すために、読者にreadAsArrayBuffer方法でFileReader APIを使用することができます。

この例では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)