您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版:音频可视化,API带来的视听

1010cc时时彩经典版:音频可视化,API带来的视听

发布时间:2019-08-14 09:53编辑:1010cc时时彩客户端浏览(136)

    HTML5 audio API的研究与学习1

    HTML5 audio

    1.audio sprite

    音频精灵的主要思想其实跟css精灵差不多,将一个音频合成到一个音频,然后通过currentTime获取当前播放时间进行区分,不过在这里执行以下代码之前需将audio

    先加载到页面当中。当时怎么判断页面已经加载完声音呢,在移动端audio的很多属性支持的都不是很好,在尝试了很多也在网上找了很多资料之后,暂且发现可以使用AudioContext对象去管理与播放声音

    var audioSprite = document.getElementById("audio1");
                        audioData = {
                            shake: {
                                start: 0,
                                length: 10
                            },
                            win: {
                                start: 15,
                                length: 15
                            }
                        }
                        document.getElementById("play").addEventListener("click", function () {
                            audioSprite.play()
                            audioSprite.currentTime = audioData.shake.start;
                            //audioSprite.play();
                        }, false);
                        var handler = function () {
                            if (this.currentTime >= audioData.shake.start   audioData.shake.length) {
                                this.pause();
                                setTimeout(function () {
                                    audioSprite.removeEventListener("timeupdate", handler, false);
                                    audioSprite.currentTime = audioData.win.start;
                                    audioSprite.play();
                                    audioSprite.addEventListener("timeupdate", handler2, false);
                                }, 1000);
                            }
                        }
    
                        var handler2 = function () {
                            if (this.currentTime >= audioData.win.start   audioData.win.length) {
                                this.pause();
                            }
                        }
                        audioSprite.addEventListener("timeupdate", handler, false);
    

    2.利用AudioContext,为了生成一个声音,需要创建一个或多个声音源,并且通过AudioContext对象将这些声音源连接在一起,这些声音源并不是直接连接,而是通过多个用于对音频信号的各种模块进行处理的AudioNodes对象间接连接.

    一个AudioContext对象可以支持多个音频输入,可以支持音频图的生成,所以在一个音频处理应用程序中我们只需创建一个AudioContext对象

     var context;
            if(webkitAudioContext){
                context = new webkitAudioContext();
            }else{
                context = new AudioContext();//标准
            }
    

    2.1在创建了AudioContext对象之后,我们可以使用AudioBuffer对象加载音频数据。以上有个加载声音的按钮,我们通过点击该按钮后使用XMLHttpRequest对象获取服务器端的MP3文件中的音频数据。以下实例:

    function loadSound() {
                var request = new XMLHttpRequest();
                request.open("GET", "smbb.mp3", true);
                request.responseType = "arraybuffer";
                request.onload = function () {
                    context.decodeAudioData(request.response, function (buffer) {
                        console.log(buffer)
                    }, onError);
                }
                request.send();
            }
    
            function onError(e) {
                console.log(e);
            }
    

    在以上代码中用户点击“加载声音”按钮,执行javascript脚本代码中的loadSound函数,在该函数中,使用XMLHttpRequest对象获取服务器端的MP3文件中的音频数据,因为音频数据是二进制数据,所以讲XMLHttpRequest对象的responseType属性值设为“arraybuffer”。当接受到服务器的MP3文件中未解码的音频数据时,可以使用AudioContext对象的decodeAudioData方法将其解码。

    AudioContext对象的decodeAudioData方法使用三个参数,其中第一个为一个加载了未解码的音频数据的ArrayBuffer对象,第2,3个参数都为一个函数,代表音频数据的解码处理执行成功时执行的回调函数与音频数据的解码处理执行失败时执行的回调函数.

    2.2当音频加载完成之后我们就可以通过AudioBuffer对象的createBufferSource对象创建一个AudioBufferSourceNode对象(代表音频播放设备的声音源),并且将AudioBufferSourceNode对象的buffer属性值指定为AudioBuffer对象,代码如下

    var source = context.createBufferSource();
        source.buffer = buffer;
    

    该buffer为上面例子decodeAudioData返回的buffer。

    接下来,我们需要使用AudioBufferSourceNode对象的connect方法将声音源连接到AudioContext对象的destination属性值(代表音频播放设备)。

    source.connect(context.destination);
    

    AudioBufferSourceNode对象的connect方法使用一个参数,参数值为AudioContext对象的destination属性值,该属性值为客户端计算机上的音频播放设备

    最后使用AudioBufferSourceNode对象的start方法播放声音

    source.start(0)//备注:之前网上跟书上很多位置都是说使用noteOn方法,当时,我测试该方法未定义。使用start()方法可以播放,当时测试在IOS系统中如果start方法不传参数,该方法也是未定义,后来发现必须得给一个默认得参数。

    现阶段的整个代码

        声音加载处理封装到一个类中
    
    
    
    
    
    
    
    
    
    
        <script>
            var audioBuffer = null;
            var context;
            if(webkitAudioContext){
                context = new webkitAudioContext();
            }else{
                context = new AudioContext();
            }
             //加载音频数据
            function loadSound() {
    
                var request = new XMLHttpRequest();
                request.open("GET", "smbb.mp3", true);
                request.responseType = "arraybuffer";
                request.onload = function () {
                    context.decodeAudioData(request.response, function (buffer) {
                        /*var audio = new Audio();
                             audio.src="smbb.mp3";
                             audio.play();*/
                        var audioSprite = document.getElementById("audio1");
                        audioData = {
                            shake: {
                                start: 0,
                                length: 10
                            },
                            win: {
                                start: 15,
                                length: 15
                            }
                        }
                        document.getElementById("play").addEventListener("click", function () {
                            audioSprite.play()
                            audioSprite.currentTime = audioData.shake.start;
                            //audioSprite.play();
                        }, false);
                        var handler = function () {
                            if (this.currentTime >= audioData.shake.start   audioData.shake.length) {
                                this.pause();
                                setTimeout(function () {
                                    audioSprite.removeEventListener("timeupdate", handler, false);
                                    audioSprite.currentTime = audioData.win.start;
                                    audioSprite.play();
                                    audioSprite.addEventListener("timeupdate", handler2, false);
                                }, 1000);
                            }
                        }
    
                        var handler2 = function () {
                            if (this.currentTime >= audioData.win.start   audioData.win.length) {
                                this.pause();
                            }
                        }
                        audioSprite.addEventListener("timeupdate", handler, false);
                    }, onError);
                }
                request.send();
            }
            function onError(e) {
                console.log(e);
            }
        </script>
    

    总结,HTML5的audioAPI功能确实很强大,研究起来也很有意思,不过暂且技术部到家,在琢磨的时候耗费的时间也不少,当然肯定也有漏洞,说的不对的地方还请见谅,下阶段还有更有意思的控制播放节奏,多个声音的交叉混合及多个声音文件之间的平滑过渡。。。

    audio API的研究与学习1 HTML5 audio 1.audio sprite 音频精灵的主要思想其实跟css精灵差不多,将一个音频合成到一个音频,然后通过currentTim...

    “如毒似魅,如解似仙。程序世界,代码纷纷,web audio是流经存在的邂逅。九十刹那为一念,一念中一刹那经九百生灭,盘舞环形地来寻你。"
    —— 题记

    文章是我在学习Web Audio 时翻译的 原文在此

    话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代。但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等前沿东西的时候,我们默认是把IE排除在外的。本文的例子可以工作在最新的Chrome及Firefox浏览器下,其他浏览器暂未测试。

    1010cc时时彩经典版 1

    正文


    1010cc时时彩经典版 2Logic proX

    若下方未出现演示页面请刷新。

    实际效果

    Web Audio简介

    Web Audio API为控制网页的音频提供了强有力的后盾,允许开发人员为音频添加效果,创建音频可视化等等。

    1010cc时时彩经典版 3

    源自网络.png

    1010cc时时彩经典版 4

    源自网络.png

    百科:音频和声音

    1010cc时时彩经典版 5

    百度百科

    1010cc时时彩经典版 6

    百度百科

    在html5 <audio> 元素出现之前,一个网页想要发声,就得需要flash或者其他插件的辅助。而<audio>标签的出现,使网页在游戏和网页交互方面有了极大的飞跃。

     你也可以点此全屏演示  或者前往GitHub进行代码下载然后本地运行。

    AudioContext

    包含各个 AudioNode 对象以及它们的联系的对象,可以理解为 audio 上下文对象。(类似于 canvas 的 getContext())
    绝大多数情况下,一个 document 中只能有一个 AudioContext
    创建:

    var ac = new window.AudioContext();
    
    // 兼容写法
    var ac = new (window.AudioContext || window.webkitAudioContext)();
    
    Web audio的内容和用途

    Web Audio API包含通过audio context操控音频,不同类型的源也可以被一个环境支持,并允许模块路由。利用audio nodes(连接一起形成了audio routing graph)执行操作,模块的设计为创建复杂音频功能提供灵活性。

    根据英文解释,它是在audio context里操控音乐的发生,无论是一首或多首,都可以在一个audio context里搞定,相当于为audio的控制设置了一个环境,我们在这个操控室里统筹音乐。环境有了,用什么来操作,audio nodes,相当于各种操纵杆。也有这么一个比喻说,“想象卡拉OK设备,DVD机相当于音频音源,音响相当于音频播放设备,混响器(主要用于把你的声音与背景音乐合成最终输出到音响上)相当于音频处理模块”,然后各个模块通过电线连接,最终接在音响上。

    Web-Audio-API 是一个用与WebApp 统筹以及合成声音的高级Api。这套Api的目标是在音频处理方面能够达到当今很多游戏音频引擎,混音器,处理器,滤波器的水平。 以下就是相关介绍。

    你还可以 下载示例音乐(如果你手头没有音频文件的话)

    属性:

    • destination

      AudioDestinationNode 对象,所有的音频输出聚集地,相当于音频的硬件,所有的 AudioNode 都直接或间接连接到这里

    • currentTime

      AudioContext 从创建开始到当前的时间(秒)

    Web audio的工作流程
    1. 创建音频环境(audio context)
    2. 在音频环境里,创建源 —— 比如<audio>, oscillator, stream
    3. 创建效果节点,比如reverb, biquad filter, panner, compressor
    4. 选择音频的最终输出口,比如扬声器
    5. 连接 源——效果——目的地(输入——处理——输出)

    1010cc时时彩经典版 7

    图例.png

    AudioContext 是用来控制管理所有声音用的。在实际用途中,我们可以用AudioContext的实例,创建一个音频源,或者很多音频源并且将他们连接到音频出口。这种连接并不一定是直接连接了,这里可以在中间连接上一系列的AudioNodes(你可以当做 中间处理器吧 就跟美图里面的滤镜一样 最后还是要导出到相册),这些AudioNodes的作用就是对声音信号做相应的处理。

    文件列表:
    bbc_sherlock_openning.mp3
    Neptune Illusion Dennis Kuo .mp3
    单曲Remix ┃ 爱上这个女声 放进专辑里私藏 夜电播音员.mp3
    爱啦啦.mp3

    方法:

    • decodeAudioData(arrayBuffer, succ(buffer), err)

      异步解码包含在 arrayBuffer 中的音频数据

    • createBufferSource()

      创建 audioBufferSourceNode 对象

    • createAnalyser()

      创建 AnalyserNode 对象,分析音频

    • createGain()/createGainNode()

      创建 GainNode 对象,调节音量

    部分属性方法解释

    CAUTION! 后面简称Web-Audio-API => WAA

    最后,喜欢的朋友可以去GitHub星我(star me)叉我(fork me)。

    audioBufferSourceNode 对象

    表示内存中的一段音频资源,其音频数据存在于 AudioBuffer 中(其 buffer 属性)
    创建:

    var buffersource = ac.createBufferSource();
    
    • 属性:

      • buffer

        AudioBuffer 对象,表示要播放的音频资源数据

        • 子属性:duration 该音频资源的时长(秒)
      • loop

        是否循环播放,默认 false

      • onended

        可绑定音频播放完毕时调用的事件处理程序

    • 方法:

      • 开始播放音频(参数可选)

          start/noteOn(when=ac.currentTime, offset=0, duration=buffer.duration-offset)
        
        • when 何时开始播放

        • offset 从音频的第几秒开始播放

        • duration 播放几秒

    • 结束播放音频(参数可选)

         stop/noteOff(when=ac.currentTime)
      

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版:音频可视化,API带来的视听

    关键词: