从HTML中的Web服务器资源播放FLAC [英] play FLAC from resources of web server in HTML

问题描述

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

I'm running an apache2 website where you are able to upload lossless files including .wav and .flac. wav files works right away while flac is not supported. So I was wondering if there is any way to play these flac files with some help of JavaScript?

这是怎么回事:

1. 单击按钮选择文件.

2. 选择后，它将自动将发布请求发送到名为"flacuploader.php"的PHP文件.

1. Click button to choose file.

2. Once chosen, it will automaticly send post request to a PHP file i named "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>

然后flacuploader.php将发帖请求保存到文件夹"/lossless"，而无需更改文件.

现在是问题所在.我怎么玩?

我四处搜寻并发现了以下内容: Flac.js-GitHub 和使用SIP.js和Flac.js在WebRTC上播放FLAC文件 . 但我认为这些来源都没有回答我的问题，因为我只是想将其解码为可播放的文件，或者使用JavaScript来完成这项工作.

I search around and came across this: Flac.js - GitHub and Playing a FLAC file over WebRTC with SIP.js and Flac.js. But I think those sources missed my question because I simply want to decode it to a playable file, or have javascript to do the job.

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

I have a file in /lossless called test.flac, and I simply want to be able to play that file in PHP/html. It is not meant to be full quality, but rather a preview of the upload. But the original file will still be stored as it is.

我尝试将其放入flacuploader.php:

I tried putting this in the 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>

因此它不会播放声音.

And so it wouldn't play the sound.

任何事情都会有所帮助.

Anything will help.

推荐答案

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

You do not need the sip.js file if you only want to play the file in the browser.

要简单地从URL播放文件，可以使用fromURL方法创建播放器.

To simply play a file from a URL you can use the fromURL method to create your player.

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

这是一个> JSFiddle 示例，显示了其工作原理.

Here is a JSFiddle example showing how that works.

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.

You could also use the FileReader API with the readAsArrayBuffer method on the reader to pass the result to AV.Player.fromBuffer.

在该示例中， JSFiddle .

Here the JSFiddle for that example.

(对不起，由于某些原因，示例在SO代码段中不起作用，所以我必须使用JSFiddle)

( Sorry, the examples for some reason did not work in SO snippets, so i have to use 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)

这篇关于从HTML中的Web服务器资源播放FLAC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！