zoukankan      html  css  js  c++  java
  • 【Web Audio API】 — 那些年的 web audio

    TAT.Jdo:【Web Audio API】 — 那些年的 web audio

    这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正。

    在这之前,先回顾一下那些年我们一起走过的web audio:

    <bgsound>

    在我印象当中,bgsound是个很古老的东西,接触互联网之后,那时兴起的个人blog都有一个增加小组件或者背景音乐的功能,就是允许你贴入一段代码来实现,那是我最早接触bgsound的时候;当然那时也只是会ctrl+c/v ~~

    网上翻来些资料,大概是这样的:

    早在1996年,IE3.0定义了<bgsound>的标签,这应该web最早的一个能播放音频的标签;但它却从未成为标准,由始至终只有IE支持该标签;提供的功能比较有限,简单的后台自动播放,支持.wav|.mid|.ua格式音频;

    <embed>

    IE推出bgsound之后没多久,作为当年浏览器厂商的大哥 – NetScape同年即推出了功能类似的标签<embed>;

    个人觉得<embed>早期相对于<bgsound>而言,最大的两个特色:

    1.有界面交互,可以让用户控制播放/暂停(该属性可选);

    2.不止能播放音频格式文件,还能播放当时比较高端的VRML Live3D图形动画。

    以浏览器厂商老大的身份,很快IE3V2+, 以及后续的 safari, opare, firefox均支持了<embed>。

    <object>

    随着web的快速发展,标准变得越来越重要,这时就有了W3C存在的理由,1997年伴随着HTML4的到来,W3C引入了<object>标签,囊括了图片、音频、视频等格式文件,可以说非常彪悍;作为第一款可以跨浏览器间播放音频的标签,基本能满足我们当时对嵌入媒体的欲望,但<object>同样存在自己的弊端,例如标签臃肿,依赖插件,SEO困难等;

    <audio>

    08年初,第一份正式的HTML5草案发布,引入更新的富媒体元素<video> <audio> <canvas>,这些标签的引入最大目的还是为了减少web富媒体应用对插件的依赖。仅从标签名来说就能很好区分各自的功能,这点无疑是非常有利于搜索引擎去索引资源的,相比<object>来说,最明显的特色即是:

    1. 标签语义化,结构更简单;

    2. 脱离插件;

    3. 简单的javascript内置方法以及事件交互。

    看似对音频控制都比较完善,但开发者缺少了对音频数据的访问权限,在很多更动感的交互,更复杂的音效需求面前就显得力不从心了。

    [Audio Data API]

    为了解决现状,Mozilla社区提出了Audio Data API,对<audio>标签进行js能力方面的扩展,这套API主要还是以提供读取写入音频数据接口为主,例如:

    // 定义音频对象
    var audio = new Audio();
    var bufferLenth;
    audio.src = "song.ogg";
    audio.addEventListener('MozAudioAvailable', handleWithSample, false);
    audio.addEventListener('loadedmetadata', handleWithMeta, false); 
    audio.play(); 
    function handleWithMeta () { 
        bufferLenth = audio.mozFrameBufferLength; 
    } 
    function handleWithSample (e) { 
        var samples = e.frameBuffer; 
        for (var i = 0; i < bufferLenth; i++) { 
            // do something with audio data 
            dosomething(samples[i]) 
        } 
    }
    

    基于MozAudioAvailable事件驱动读取音频原始数据

    注:该方法已无法正确执行,Firefox已转向Web Audio API的支持,后续的Firefox版本逐渐废弃了Audio Data API的旧接口。

    但对于一个开发者来说,并非人人都是音频资深用户或者发烧级音乐玩家,而且在很多音频的专业效果处理上需涉及大量波形相关处理算法,这就直接把很多开发者拒之门外了,这也是为什么最后W3C推荐了 Web Audio API。

    [Web Audio API]

    Web Audio API最早是Chrome社区提出并支持的,Web Audio API 是一套全新的相对独立的接口系统,对音频文件拥有更高的处理权限以及内置相关的音频专业效果处理,可以完全独立于 <audio> 标签而存在。这里把内置相关音频专业效果处理标红主要是因为,我个人觉得这是Web Audio API相对于Audio Data API最大的一个区别,也是为什么最终被W3C推荐的原因。

    大概整了一下Web Audio API的新特点:

    1. 更精准的时间控制;

    2. 可完全独立<audio>,允许更多音频文件同时播放,用于游戏或者复杂音频应用场景;

    3. 模块化路由连接方式,让音频操作更加灵活形象;

    4.实时的频域、时域数据访问/操作;

    1. 更多专业的音频处理方法

    (1) 音道分离/合并;

    (2) 音频延时效果;

    (3) 内置频率滤波器;

    (4) 音频空间感效果以及多普勒效应模拟;

    (5) 音频卷积运算(用于声场环境模拟);

    (6) 自定义波形生成器;

    (7) 波形非线性失真处理。

  • 相关阅读:
    linux 图形界面形式和命令行形式
    linux 配置 jdk7
    StackOverflowError
    一次失败的svchost hacking
    VB调用API的学习
    植物打僵尸休闲花园外挂代码
    中文日文翻译工具
    vb跨域访问,获得特定的frame进行处理
    HTML对象库简介(Microsoft HTML Object Library > mshtml.tlb)
    用正则分析一段vb代码含有哪些过程或者函数
  • 原文地址:https://www.cnblogs.com/10manongit/p/12980768.html
Copyright © 2011-2022 走看看