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

js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据目录文章目录前言推荐阅读常见`API`代码实现`audio.html``streamFile.php`总结前言尝试利用浏览器中的audio API推荐阅读MDN常见APIAudioContextdecodeAudioData代码实现audio.html<!DOCTYPE html><html lang="e

莫兮是我

847人浏览 · 2021-04-06 03:06:31

莫兮是我 · 2021-04-06 03:06:31 发布

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

前言

尝试利用浏览器中的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`

<?php


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