本文主要是介绍js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据 目录
文章目录
- 前言
- 推荐阅读
- 常见`API`
- 代码实现
- `audio.html`
- `streamFile.php`
- 总结
前言
- 尝试利用浏览器中的
audio API
推荐阅读
- MDN
常见API
AudioContextdecodeAudioData
代码实现
audio.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>audio api</title>
</head>
<body>
<!--<audio controls="controls" autoplay="autoplay">-->
<!-- <source src="test.mp3" type="audio/mpeg">-->
<!--</audio>--><!--<input id="file" type="file">-->
</body>
<script>
init();
// getFile();
function init() {// AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;let aCtx;try{aCtx = new (window.AudioContext || window.webkitAudioContext)();}catch (e) {console.log(e);}play(aCtx, 'http://localhost:83/streamFile.php');}// file
function getFile() {const fileDom = document.getElementById('file');fileDom.addEventListener('change', event=>{const file = event.target.files[0];console.log(file);const fileReader = new FileReader();const audioContext = new (window.AudioContext || window.webkitAudioContext)();fileReader.readAsArrayBuffer(file);fileReader.onload = ()=>{console.log(audioContext);audioContext.decodeAudioData(fileReader.result, result=>{console.log('start');console.log(result);const source = audioContext.createBufferSource();source.buffer = result;source.connect(audioContext.destination);source.start();},err =>{console.log(`decodeAudioData error:${err}`);});};});
}// 加载音乐function load(ctx, fUrl, succFN, failFN) {let req = new XMLHttpRequest();req.open('GET', fUrl, true);req.responseType = 'arraybuffer';req.onprogress = data => {console.log(`data:${data}`);console.log(`response:${req.response.byteLength}`);};//旧版的回调函数//异步解码req.onload = function () {console.log(this.response);// 解码ctx.decodeAudioData(this.response,buf =>{succFN && succFN(buf);},(err) => {failFN && failFN(err);});}//新版的promise// req.onload = function () {// ctx.decodeAudioData(this.response)// .then();// }req.send();}//播放音频function play(ctx, fUrl) {load(ctx, fUrl, buf => {//测试是否进入console.log('Enter decode...');//创建一个node对象let sNode = ctx.createBufferSource();// console.log(buf);sNode.buffer = buf;//连接到destination节点进行播放sNode.connect(ctx.destination);sNode.start(0);sNode.loop = true;}, err => {console.log(`Error with decoding ${err}`);});}
</script>
</html>
streamFile.php
<?phpnamespace streamFile;
spl_autoload_register(function (string $className){require_once $className . ".php";
});class streamFile
{private $file;/** @param String $file 要发送的文件* */public function __construct(string $file){$this->file = $file;}public function sendStreamFile() {if (!file_exists($this->file)) return false;$opt = array('http' => array('method' => 'POST','header' => 'Content-Type: audio/mpeg'));// header('content-Transfer-Encoding: binary');
// header('Progma: no-cache');
// header('icy-br: 128');$context = stream_context_create($opt);$response = file_get_contents($this->file, false, $context);return $response;}public function openFile(){$fp = fopen($this->file, "r");header("Content-type: application/octet-stream");header("Accept-Ranges: bytes");header("Content-Disposition: attachment; filename=test.mp3");$buffer = 1024;while (!feof($fp)){$file_con = fread($fp, $buffer);echo $file_con;}fclose($fp);}
}$ret = new streamFile('test.mp3');
var_dump($ret->openFile());//echo 'start';
总结
- 如果出现
Uncaught (in promise) DOMException: Unable to decode audio data这种报错，毫无疑问，是后端传来的二进制数据存在问题，需要后端进行修改。
这篇关于js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
