记录--关于前端的音频可视化-Web Audio

这篇具有很好参考价值的文章主要介绍了记录--关于前端的音频可视化-Web Audio。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--关于前端的音频可视化-Web Audio

背景

最近听音乐的时候,看到各种动效,突然好奇这些音频数据是如何获取并展示出来的,于是花了几天功夫去研究相关的内容,这里只是给大家一些代码实例,具体要看懂、看明白,还是建议大家大家结合相关API文档来阅读这篇文章。

参考资料地址:Web Audio API - Web API 接口参考 | MDN (mozilla.org)

记录--关于前端的音频可视化-Web Audio

实现思路

首先画肯定是用canvas去画,关于音频的相关数据(如频率、波形)如何去获取,需要去获取相关audio的DOM 或通过请求处理去拿到相关的音频数据,然后通过Web Audio API 提供相关的方法来实现。(当然还要考虑要音频请求跨域的问题,留在最后。)

一个简单而典型的 web audio 流程如下(取自MDN):

  1. 创建音频上下文
  2. 在音频上下文里创建源 — 例如 <audio>, 振荡器,流
  3. 创建效果节点,例如混响、双二阶滤波器、平移、压缩
  4. 为音频选择一个目的地,例如你的系统扬声器
  5. 连接源到效果器,对目的地进行效果输出

记录--关于前端的音频可视化-Web Audio

实现

一、频率图

实现第一种类型,首先我们需要通过fetch或xhr来获取一个线上音频的数据,这里以fetch为例;

 //创建一个音频上下文、考虑兼容性问题
 let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 //添加一个音频源节点
 let source = audioCtx.createBufferSource();
//res.arrayBuffer是将数据转换为arrayBuffer格式
 fetch(url).then((res) => res.arrayBuffer()).then((res) => {
        //decodeAudioData是将arrayBuffer格式数据转换为audioBuffer
        audioCtx.decodeAudioData(res).then((buffer) => {
          // decodeAudioData解码完成后,返回一个AudioBuffer对象
          // 绘制音频波形图
          draw(buffer);
          // 连接音频源
          source.buffer = buffer;
          source.connect(audioCtx.destination);
          // 音频数据处理完毕
        });
      });

记录--关于前端的音频可视化-Web Audio

 需要明白的是,source.connect(audioCtx.destination)是将音频源节点链接到输出设备,否则会没声音哦。那么现在有了数据、我们只需要通过canvas将数据画出来即可。

function draw(buffer) {
  // buffer.numberOfChannels返回音频的通道数量,1即为单声道,2代表双声道。这里我们只取一条通道的数据
  let data = [];
  let originData = buffer.getChannelData(0);
  // 存储所有的正数据
  let positives = [];
  // 存储所有的负数据
  let negatives = [];
  // 先每隔50条数据取1条
  for (let i = 0; i < originData.length; i += 50) {
    data.push(originData[i]);
  }
  // 再从data中每10条取一个最大值一个最小值
  for (let j = 0, len = data.length / 10; j < len; j++) {
    let temp = data.slice(j * 10, (j + 1) * 10);
    positives.push(Math.max(...temp));
    negatives.push(Math.min(...temp));
  }
  if (canvas.getContext) {
    let ctx = canvas.getContext("2d");
    canvas.width = positives.length;
    let x = 0;
    let y = 75;
    let offset = 0;
    var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
    // 为渐变添加颜色,参数1表示渐变开始和结束之间的位置(用0至1的占比表示),参数2位颜色
    grd.addColorStop(0, "yellow");
    grd.addColorStop(0.5, "red");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    ctx.beginPath();
    ctx.moveTo(x, y);
    // 横坐标上方绘制正数据,下方绘制负数据
    // 先从左往右绘制正数据
    // x + 0.5是为了解决canvas 1像素线条模糊的问题
    for (let k = 0; k < positives.length; k++) {
      ctx.lineTo(x + k + 0.5, y - 50 * positives[k]);
    }

    // 再从右往左绘制负数据
    for (let l = negatives.length - 1; l >= 0; l--) {
      ctx.lineTo(x + l + 0.5, y + 50 * Math.abs(negatives[l]));
    }
    // 填充图形
    ctx.fill();
  }
}

[参考文章](Web Audio - 绘制音频图谱 - 掘金 (juejin.cn))

二、实时频率图

实现第二种类型,获取实时频率,用到的API与第一种有区别,但流程一直,都是通过一个音频源节点通过连接达到效果。只不过在连接的中间加入了一个分析器analyser,在将分析器连接到输出设备。

    const audio =document.querySelector('audio')
    //解决音频跨域问题
    audio.crossOrigin ='anonymous'
    const  canvas =document.querySelector('canvas')
    const ctx=canvas.getContext("2d")
        function initCanvas(){
        //初始化canvas
            canvas.width=window.innerWidth*devicePixelRatio
            canvas.height=(window.innerHeight/2)*devicePixelRatio
        }
        initCanvas()
        //将数据提出来
        let dataArray,analyser;
        //播放事件
        audio.onplay=function(){
            //创建一个音频上下文实例
            const audioCtx=new (window.AudioContext || window.webkitAudioContext)();
            //添加一个音频源节点
            const source=audioCtx.createMediaElementSource(audio);
            //分析器节点
             analyser=audioCtx.createAnalyser();
            //fft分析器  越大 分析越细
            analyser.fftSize=512
            //创建一个无符号字节的数组
             dataArray=new Uint8Array( analyser.frequencyBinCount);
            //音频源节点 链接分析器
            source.connect(analyser)
            //分析器链接输出设备
            analyser.connect(audioCtx.destination,)
        }
那么接下来至于怎么把数据画出来,就凭大家的想法了。
            requestAnimationFrame(draw)
            //
            const {width ,height}=canvas;
            ctx.clearRect(0,0,width,height)
            //分析器节点分析出的数据到数组中
            ctx.fillStyle='#78C5F7'
           ctx.lineWidth = 2;
            ctx.beginPath();
            //getByteFrequencyData,分析当前音频源的数据 装到dataArray数组中去
            //获取实时数据
            analyser.getByteFrequencyData(dataArray)
            // console.log(dataArray);
            const len =dataArray.length;
            const barWidth=width/len;
            let x=0;
            for(let i=0;i<len;i++){
                const data=dataArray[i];
                const barHeight=data/255*height;
           
                // ctx.fillRect(x,y,barWidth,height)
                
        let v = dataArray[i] / 128.0;
        let y = v * height/2;

        if(i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }

        x += barWidth;
            }
            // ctx.lineTo(canvas.width, canvas.height/2);
            ctx.stroke();
        }
        draw();

关于请求音频跨域问题解决方案

给获取的audio DOM添加一条属性即可

   audio.crossOrigin ='anonymous'

或者直接在 aduio标签中 加入 crossorigin="anonymous"

总结

虽然现在已经有很多开源的对于音频相关的库,但如果真正的想要去了解,去学习音频相关的东西。必须要去深入学习相关的Web Audio API,当然这里只是用了其中两种的方法去实现Web Audio去实现可视化,算是一个基础入门,对于文中的createBufferSourcecreateMediaElementSourcecreateAnalyserAudioContextarrayBufferdecodeAudioData等等相关的API都需要去了解,在可视化方面,还有多种多样的方式去绘制动画,如WebGL。对音频的处理也不只是在可视化方面。

本文转载于:

https://juejin.cn/post/7205381513339322427

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--关于前端的音频可视化-Web Audio文章来源地址https://www.toymoban.com/news/detail-595101.html

到了这里,关于记录--关于前端的音频可视化-Web Audio的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属的专栏: 数据分析系统化教学,零基础到进阶实战 景天的主页: 景天科技苑 Streamlit是一个免费的开源框架,用于快速构建和共享漂亮的数据科学Web应用程序。它是一个基于Python的库,专为机器学

    2024年03月14日
    浏览(46)
  • vue 音频可视化

    ​ 书接上文 vue实现歌词滚动效果,既然有了歌词滚动那么今天给大家来个绝活——音频可视化。伴随着各种新技术的更新迭代,往后大家或多或少都会接触到这个技能,因为在未来前端可视化必定会占有极其重要的地位,可视化应用场景应用模式也是千变万化,我将以最直

    2024年02月03日
    浏览(72)
  • Vue中如何进行音频可视化与音频频谱展示

    随着音频应用程序的不断发展,音频可视化和音频频谱展示成为了重要的功能。在Vue应用程序中实现音频可视化和音频频谱展示可以帮助用户更好地了解音频文件的内容和特征。本文将介绍如何在Vue应用程序中实现音频可视化和音频频谱展示功能。 音频可视化是指将音频信号

    2024年02月15日
    浏览(59)
  • python对wav音频可视化

    本文主要是使用代码实现音频文件(wav)的多种可视化。 1.信号 2.傅里叶变换 3.Mel(梅尔)谱图 4.log_Mel谱图 提示:以下是本篇文章正文内容,下面案例可供参考 为了便于展示,我将信号和傅里叶变换使用plt组合在一起进行展示。 结果展示: 为了便于展示,我将信号和傅里

    2023年04月08日
    浏览(80)
  • Vue常用的组件库大全【前端工程师必备】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、3D组件库】

    1)Vant ui 🔸有赞移动 UI 组件库,支持 Vue2/3 微信小程序,支付宝小程序 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/col Vant 是由有赞前端团队开发的一套基于 Vue.js 的移动端 UI 组件库,它包含了丰富的组件和功能,可以帮助开发者快速构建高质量的移动应用。Vant 以简洁易用和高质量

    2024年02月04日
    浏览(54)
  • Android 音频可视化:频谱特效的探索与实践

    音频可视化,一言以蔽之,就是声音到图像的转换。 随着视觉工业时代的到来,用户逐渐重视产品的极致体验,在市场上诸多优秀的音乐类APP中, 频谱动效 是一个经典的应用场景: 图片来源:咪咕音乐 本文以 Android 端为例,从音频信号 数据的获取 、 数据的处理 、 常见问

    2024年02月15日
    浏览(45)
  • Pixi + Tone 实现简单midi音频可视化

    Pixi.js 是一个前端图形渲染库,使用精灵技术绘制高性能的图形。 Tone.js是一个前端音频框架,对web audio api进行了封装,可以快速创建音频样本、音频效果、进行音频分析和音频播放。 @tonejs/midi是tonejs的一个插件,可以讲midi文件转化为Tone.js可以解析的json格式。 首先需要讲

    2024年02月16日
    浏览(37)
  • 关于可视化大屏适配

    vw、vh方案: 原理:按照设计稿的尺寸,将px按比例计算转为vw和vh; 优点:不会存在失真情况、可以动态计算图表的宽高,字体等,灵活性较高,当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况; 缺点:类似第三方echart图表都需要单独做字体、间距、位移的适配,比较

    2024年04月16日
    浏览(38)
  • 关于简单的数据可视化

    1. 安装数据可视化必要的openpyxl、pandas,matplotlib等软件包  使用清华源,命令如下: 安装成功后,可以进入下一步。 2. 这里新建一个Excel表格方便说明一下: 运行代码生成如下表格: 3. 对性别进行可视化操作--绘制饼图: 运行结果如下图所示:  4. 对姓名和年龄进行可视

    2024年02月03日
    浏览(39)
  • HTML5+CSS3+JS小实例:音频可视化

    实例:音频可视化 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 【CSS】

    2024年01月18日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包