js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据

本文主要是介绍js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据目录

文章目录

前言
推荐阅读
常见`API`
代码实现
- `audio.html`
- `streamFile.php`
总结

前言

尝试利用浏览器中的audio API

常见`API`

AudioContext
decodeAudioData

代码实现

`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';