我正在运行一个 apache2 网站,您可以在其中上传无损文件,包括 .wav 和 .flac。 wav 文件可以立即使用,但不支持 flac。所以我想知道是否有任何方法可以在 JavaScript 的帮助下播放这些 flac 文件?
这是发生的事情:
- 点击按钮选择文件。
一旦选择,它会自动发送post请求到一个名为“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>
- 然后 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 中播放该文件。它并不意味着完整的质量,而是上传的预览。但原始文件仍将按原样存储。
我尝试将其放入 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>
所以它不会播放声音。
任何事情都会有所帮助。
最佳答案
如果您只想在浏览器中播放文件,则不需要 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)
关于javascript - 从 Web 服务器的 HTML 资源中播放 FLAC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41336909/