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

Posted 2023-02-25

【中文标题】从 HTML 中的 Web 服务器资源播放 FLAC

【英文标题】：play FLAC from resources of web server in HTML

【发布时间】：2016-12-26 22:29:51

【问题描述】：

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

这是发生了什么：

点击按钮选择文件。

一旦选择，它会自动向我命名为“flacuploader.php”的 PHP 文件发送 post 请求

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

然后 flacuploader.php 将 post 请求保存到文件夹“/lossless”，文件不做任何更改。 现在问题来了。怎么玩？

我四处搜索，发现了这个：Flac.js - GitHub 和 Playing a FLAC file over WebRTC with SIP.js and Flac.js。 但我认为这些来源错过了我的问题，因为我只是想将其解码为可播放的文件，或者让 javascript 来完成这项工作。

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

我试着把它放在 flauploader.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>

所以它不会播放声音。

任何事情都会有帮助。

【参考方案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 sn-ps 中不起作用，所以我必须使用 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)

【讨论】：

嗯。在第二个示例中，它看起来像是在本地播放音频，这没问题。但是如何指定要选择的文件而不是弹出一个窗口来选择文件？我确信我可以将正在上传的 FLAC 的位置从一个 PHP 传递到另一个 PHP，以便服务器使用最少的带宽。

啊等一下.. 我得到它的工作，但这是从第一个例子。原因是我无法将文件从我的网站流式传输到 jsfiddle.net。

好的，上传完成后使用fromURL方法即可。上传文件的位置只是一个 URL。