zoukankan      html  css  js  c++  java
  • HTML5 ——web audio API 音乐可视化(一)

    使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序。

    最终效果请戳这里;

    完整版代码请戳这里,如果还看得过眼,请给一个start⭐

    一、API###

    1. AudioContext: 该接口表示由音频模块链接而成的一个音频上处理下文,类似于canvas里面getContext(2d)返回的对象,对音频的一切 操作都在这个环境里进行;它包含各个AudioNode对象以及他们相关联的对象,创建方法如下:

      var ac = new window.AudioContect();

    2. AudioNode:音频节点,是一个音频处理模块,它包括GainNode(音量控制器)、BiquadFilterNode(滤波器)等;

    3. AudioContext的属性:

      • AudioContext.currentTime: AudioContext从创建开始到当前的时间,单位秒,是一个只读属性,不可对其进行操作;
      • AudioContext.destination:返回AudioDestinationNode对象,所有音频输出的聚集地,所有的AudioNode都直接或间接地链接到这里;
      • AudioContext.state:返回AudioContext的当前状态;
    4. AudioContext的方法:

      • AudioContext.close():关闭音频环境,释放正在使用的音频资源;

      • AudioContext.createBuffer():创建一个空的AudioBuffer对象,并能通过AudioBufferSourceNode来进行数据填充和播放;AudioBuffer可以通过AudioContect.createBuffer方法创建或使用Audio

      • AudioContext.createBufferSource():创建一个空的AudioBufferSourceNode对象,并能通过AudioBuffer来进行数据填充和播放;

      • AudioCount.createAnalyser():创建一个AnalyserNode,他可以用来显示音频时间和频率的数据。

      • AudioContext.decodeAudioData(arrayBuffer,succ(buffer),err):从ArrayBuffer对象中异步解码音频文件,这个ArrayBuffer对象通常是通过使用responseType为arraybuffer类型的XMLHttpRequest方法来获取.接受三个参数,第一个是AudioData数据,第二个是解码成功的回调函数,第三个是失败的回调函数。

      • createGain()/createGainNode():创建GainNode对象,通过改变其value的值可以改变音频音量,创建方法:

        var gainNode = ac.createGain() || ac.createGainNode();

    5. AudioBufferSourceNode:表示内存中的一段音频资源,其音频数据存储于AudioBuffer中(buffer属性中),创建方式:

      var buffersource = ac.createBufferSource();

      此对象有3个常用的属性:

      ​ 1).buffer:AudioBuffer对象,表示要播放的音频资源数据。他有一个子属性:duration,该音资源的时长,单位秒;

      ​ 2).loop:是否循环播放,默认是false;

      ​ 3).onended:绑定音频播放完毕时调用的实践处理程序;

      常用的方法:

      1. start/noteOn(when=ac.currentTime,offset=0,duration=buffer.duration-offset),开始播放音频。其中,when:何时开始播放;offset:从音频的第几秒开始播放;duration:播放几秒;
      2. stop/noteOff(when=ac.currentTime):结束播放;

    二、播放一个音频###

    通过xhr 获取到arrayBuffer类型的音频资源,用audioContext对象的decodeAudioData方法将arrayBuffer类型解析为buffer类型,用audioContext对象的createBufferSource()方法创建一个bufferSource对象,将刚才解析的buffer 数据复制给bufferSource对象的buffer属性,bufferSource对象用contect()方法链接audioContext对象的 destination 属性,最后调用bufferSource对象的“start/noteOn”方法播放音频。

    实例代码:

       //获取到arrayBuffer类型的音频资源
    
       var xhr = new XMLHttpRequest();
       function getMusic(name){
       	xhr.abort();
       	xhr.open("get","media/"+name);   // 文件位于media文件夹下,要获取的音频文件名为 name
       	xhr.responseType = "arraybuffer"; //返回类型设置为
       	xhr.onload = function(){
       		console.log(xhr.response);  //ArrayBuffer 类型的返回数据
       	};
       	xhr.send();
       }
    
       //用decodeAudioData方法将arrayBuffer类型解析为buffer类型
       var ac = new window.AudioContext();
    
       //接上例
       xhr.onload = function(){
         ac.decodeAudioData(xhr.response,function(buffer){
             var bufferSource = ac.createBufferSource();
             bufferSource.buffer = buffer;
             bufferSource.connect(ac.destination);  
             bufferSource[bufferSource.start ? "start" : "noteOn"](0);  //播放
           },function(err){
             console.log(err)
           })
       };
    

    实现对音量的控制:

    改变音量要用到gainNode对象,用gainNode对象链接到destination对象,然后让bufferSource对象链接到gainNode对象,对音量的控制,是对gainNode对象的gain.value 对象的改变达到的效果。

       //音量控制元素 
       <input type="range" id="volume" mix="0" max="100" value="50">
    
       var gainNode = ac[ac.createGain ? "createGain" :"createGainNode"]();
       gainNode.connect(ac.destination);   
    
       function getMusic(name){
         //...代码同上,只有一处需要修改
         bufferSource.connect(gainNode);  //因为上面已经将gainNode连接到ac.destination了,所以这里只需链接到gainNode即可;
       }
       $("#volume").change(function(){
       	changeVolume($(this).val()/$(this).attr("max"));
       })
       function changeVolume(num){
       	gainNode.gain.value = num * num;
       }
    

    以上代码就可以实现获取音频进行播放了,当然这只是一个开始,接下来一篇对音频进行分析。

  • 相关阅读:
    HDU-2896 病毒侵袭 字符串问题 AC自动机
    HDU-2222 Keywords Search 字符串问题 AC自动机
    pyhton3 logging模块
    pyhton3 sys模块
    pyhton3 hashlib模块
    pyhton3 os模块
    pyhton3 time模块
    pyhton3 random模块
    变种XSS:持久控制
    富文本存储型XSS的模糊测试之道
  • 原文地址:https://www.cnblogs.com/dan-dan/p/6875202.html
Copyright © 2011-2022 走看看