• HTML5 WebAudioAPI-实例(二)


    简单播放实例1:

    var url='../content/audio/海阔天空.mp3';
    if (!window.AudioContext) {
        alert('您的浏览器不支持AudioContext');
    } else {
        //创建上下文
        var ctx = new AudioContext();
        //使用Ajax获取音频文件
                
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';//配置数据的返回类型
        //加载完成
        request.onload = function () {
            var arraybuffer = request.response;
            ctx.decodeAudioData(arraybuffer, function (buffer) {
                //处理成功返回的数据类型为AudioBuffer 
                console.info(buffer);
    
                //创建AudioBufferSourceNode对象
                var source = ctx.createBufferSource();
                source.buffer = buffer;
                source.connect(ctx.destination);
                //指定位置开始播放
                source.start(0);
    
            }, function (e) {
                console.info('处理出错');
            });
        }
        request.send();
    }

     实例2,带暂停:

    <div class="container">
        <button class="btn btn-primary" id="playBtn">
            <i class="glyphicon glyphicon-pause"></i>
        </button>
    </div>
    <script>
        var url='../content/audio/海阔天空.mp3';
        if (!window.AudioContext) {
            alert('您的浏览器不支持AudioContext');
        } else {
            //创建上下文
            var ctx = new AudioContext();
            var source = null;
            //使用Ajax获取音频文件
            var request = new XMLHttpRequest();
            request.open('GET', url, true);
            request.responseType = 'arraybuffer';//配置数据的返回类型
            //加载完成
            request.onload = function () {
                var arraybuffer = request.response;
                ctx.decodeAudioData(arraybuffer, function (buffer) {
                    //处理成功返回的数据类型为AudioBuffer 
                    //console.info(buffer);
    
                    //创建AudioBufferSourceNode对象
                    source = ctx.createBufferSource();
                    source.buffer = buffer;
                    source.connect(ctx.destination);
                    //指定位置开始播放
                    source.start(0);
                    console.info(source);
    
                }, function (e) {
                    console.info('处理出错');
                });
            }
            request.send();
                
            //绑定播放按钮
            $('#playBtn').click(function () {
                var icon = $(this).find('i');;
                icon.toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
                //停止播放
                source.stop();
            });
        }
           
    
    </script>

    说明:

    WebAudio API主要是为音频文件添加音效而设计的,但是它也可以用来播放音频文件,这类似于HTML5 audio元素的功能,只是audio元素可以有控制界面,用户可以点击界面上的播放/停止按钮来控制文件的播放,也可以拖动界面上的进度条来控制播放进度。而采用WebAudio API实现的音频播放则没有控制界面,但对于移动平台Android,IOS确实非常有用的,例如在Android平台上Chrome浏览器设置了gesture-requirement-for-media-playback属性,意思是说不能通过调用audio元素的play函数实现音频文件的播放,除了调用play函数之外,还必须要求用户在屏幕上有一个手势操作,该行为和苹果的IOS上的行为一致。

    使用WebAudio播放音频文件的效率问题

    前面介绍了如何使用WebAudio来播放音频文件,但是需要注意的是不要轻易采用WebAudio的该功能,因为当音频文件较大时,可能会影响程序的执行效率。首先,如果我们在程序中采用XMLHttpRequest去下载文件时,这是一个比较耗时的操作,具体的时间取决于当前的网络环境和文件的大小,尽管程序中采用异步的下载方式,但是同样会让音频的播放延迟。其次,程序需要调用WebAudio的decodeAudioData函数去解码整个音频文件,这里需要注意的是它需要一次性解码整个文件后,才会触发成功的回调函数,程序才能开始播放音频文件,这又一次的增加了音频文件播放的延迟,另外,由于整个文件的一次性解码,整个解码前和解码后的文件都同时存放在内存中,这也引起了内存的巨大开销(相比采用audio元素播放时,因为audio元素是一边解码一边播放)。此时可能有朋友会质疑decodeAudioData API的实现有问题,其实该函数是为解码比较短小的声音文件而设计的,另外由于WebAudio对音频的延时性特别关注,所以为了较少声音的延时,在音效处理前要求把需要处理的音频文件装载进内存。

    所以如果需要使用WebAudio播放文件,又比较关注效率问题时,建议把音频文件的大小缩小一些,或者分解成若干小的文件再分别加载解码播放。

    更多:HTML5 WebAudioAPI简介(一)

  • 相关阅读:
    大数据学习之路又之从小白到用sqoop导出数据
    大数据学习之路又之从csv文件到sql文件的操作过程
    大三第一次极限测试总结
    学习套模板
    今天
    大数据学习之路之ambari配置(四)
    大数据学习之路之ambari配置(三)
    数据清洗——地域维度
    Hive数据分析(五)
    Hive数据分析(四)
  • 原文地址:https://www.cnblogs.com/tianma3798/p/6033624.html
Copyright © 2020-2023  润新知