我正在运行一个apache2网站,您可以在其中上传无损文件,包括.wav和.flac。在不支持FLAC的同时,WAV文件立即起作用。所以我想知道是否有任何方法可以在JavaScript的某些帮助下播放这些FLAC文件?
这就是发生的事情:
- 单击按钮选择文件。
-
一旦选择,它将自动将发布请求发送到我名为" 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将邮政请求保存到文件夹"/lessess",而没有更改文件。
- 现在是问题。我该如何玩?
我四处搜索并遇到了这一点:flac.js -github并用sip.js和flac.js在webrtc上播放flac文件。但是我认为这些来源错过了我的问题,因为我只是想将其解码为可玩文件,或者让JavaScript完成工作。
我有一个名为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 Sippets中无法使用,因此我必须使用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)