Pixi + Tone 实现简单midi音频可视化

这篇具有很好参考价值的文章主要介绍了Pixi + Tone 实现简单midi音频可视化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Pixi + Tone 实现简单midi音频可视化,web游戏,页面特效,音视频,前端,javascript

依赖库

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

midi文件解析

首先需要讲midi文件导入紧浏览器,由于浏览器的安全限制,我们只能使用文件选择器讲文件导入。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Midi可视化</title>
</head>
<body>
  <input type="file" id="file">

  <script>
    const input = document.querySelector('#file');
    input.addEventListener('change', (e) => {
      console.log(e.target.files[0]);
    })
  </script>
</body>
</html>

这样就可以拿到Midi文件对应的File对象。
Pixi + Tone 实现简单midi音频可视化,web游戏,页面特效,音视频,前端,javascript

导入tonejs和tone/midi插件,准备解析File对象。

  <script
  type="text/javascript"
  src="https://unpkg.com/tone@latest/build/Tone.js"
  ></script>
  <script
  type="text/javascript"
  src="https://unpkg.com/@tonejs/midi"
></script>

使用MIDI插件解析File对象。

    // 读取midi文件
    function parseMidi(file) {
      // 创建文件读取器
      const reader = new FileReader();
      // 读取文件
      reader.readAsArrayBuffer(file);
      // 文件读取完成后将文件转化为json对象
      reader.addEventListener('load', (e) => {
        currentMidi = new Midi(e.target.result);
        console.log(currentMidi);
      })
    }

有没有懂设计模式的,可以帮我优化下代码嘛,定义了一个全局变量currentMidi总觉得不舒服。
这个currentMidi中存储了midi文件的音轨,音符,乐器等信息。可以为下面创建合成器和可视化提供数据。
Pixi + Tone 实现简单midi音频可视化,web游戏,页面特效,音视频,前端,javascript

音频播放

音频使用tonejs创建合成器来播放。
在页面中添加一个按钮并绑定事件,用于播放音频,下面这段代码里有用到Tonejs创建合成器播放声音的代码。

play.addEventListener('click', (e) => {
      console.log(currentMidi);
      // 如果未加载midi文件
      if(!currentMidi) {
        alert('未加载文件');
        return;
      }

      const now = Tone.now() + 0.5; // 获取当前时间
      const synths = [];            // 存储合成器
      // 遍历midi文件中的轨道
      currentMidi.tracks.forEach(track => {
        // 创建合成器作为音轨并连接至出口,音色使用Tonejs的默认音色
        const synth = new Tone.PolySynth(Tone.Synth, {
					envelope: {
            // 声音的生命周期:按下按键 - 渐入 - 攻击阶段 - 衰减阶段 - 衰减结束 - 松开按键 - 声音消逝
						attack: 0.02,     // 渐入时间
						decay: 0.1,       // 攻击阶段(最大音量)持续时间
						sustain: 0.3,     // 衰减结束后的最小声音
						release: 1,       // 从松开按键到声音彻底消失所需的时间
					},
				}).toDestination();
		// 将合成器存储起来,为之后停止播放的功能留下接口。
        synths.push(synth);

        // 遍历轨道中的每个音符
        track.notes.forEach(note => {
          // 合成器发声
          synth.triggerAttackRelease(
						note.name,         // 音名
						note.duration,     // 持续时间
						note.time + now,   // 开始发声时间
						note.velocity      // 音量
					);
        });
      });
    })

Pixi + Tone 实现简单midi音频可视化,web游戏,页面特效,音视频,前端,javascript
到这里就可以实现MIDI文件的播放了。

可视化

可视化采用pixijs,首先使用npm下载pixijs然后导入。

<script src="../../node_modules/pixi.js/dist/pixi.js"></script>

使用pixijs创建一块画布并挂载到页面上。

const Application = PIXI.Application;  // 应用类,快速创建PIXI应用
    const Sprite = PIXI.Sprite;            // 精灵类
    const Graphics = PIXI.Graphics;        // 图形类
    // 创建应用程序并挂载
    const pixi = new Application({
      width: 1000,
      height: 600,
      backgroundColor: 0x000000
    })
    // pixi.view 代表画布,是一个canvas元素
    document.body.appendChild(pixi.view);

Pixi + Tone 实现简单midi音频可视化,web游戏,页面特效,音视频,前端,javascript
我们使用灯管类作为每一个音符的可视化。

const config = {
      speed: 1
    }
    // 定义灯光类作为音符的可视化
    class Light extends Graphics {
      constructor(color, height, x) {
        super();
        this.beginFill(color);
        this.drawRect(x, 600, 10, height);
        this.endFill();
        // pixijs的定时器,可以实现每帧执行一次,并且十分稳定
        pixi.ticker.add(() => {
          this.y -= config.speed * 5;
        });
      }
    }

随便创建两个灯管两个试试效果。

// pixi.stage 代表舞台,所有的物体必须挂载在舞台上才可以显示。
pixi.stage.addChild( new Light(0xffffff, 50, 400) );

Pixi + Tone 实现简单midi音频可视化,web游戏,页面特效,音视频,前端,javascript
成功显示,并且一直向上移动。

之后就是根据解析出来的json对象创建音符。
为了尽可能得跟音频同步减小延时,我们使用Tonejs的音频调度。
在对音符进行遍历时创建这个音符对应的调度任务。

// 在播放按钮的事件中,遍历音符时,创建音频调度,实现音画同步
Tone.Transport.schedule((time) => {
	// 根据音调划分颜色,(其实应该根据轨道来划分的)
	if(note.midi < 65) {
		pixi.stage.addChild(new Light(g.config.leftColor, note.duration * 200 * g.config.speed, (note.midi - 20) * 10))
	} else {
		pixi.stage.addChild(new Light(g.config.rightColor, note.duration * 200 * g.config.speed, (note.midi - 20) * 10))
	}
}, note.time + now);

// 在代码最外层设置音频调度的模式,并启动音频调度。
Tone.context.latencyHint = 'fastest';
Tone.Transport.start();

到这里程序的基本功能就完成了。
Pixi + Tone 实现简单midi音频可视化,web游戏,页面特效,音视频,前端,javascript文章来源地址https://www.toymoban.com/news/detail-563176.html

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

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

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

相关文章

  • SVM(支持向量机)基于Python的简单可视化实现

    本篇内容参考了这篇博客且内容不涉及数学证明,只是自己学习SVM时记下的内容,方便回顾 什么是SVM?维基百科中对于SVM的定义是这样的: 支持向量机 (英语:support vector machine,常简称为SVM,又名支持向量网络)是在分类与回归分析中分析数据的监督式学习模型与相关的学

    2024年02月08日
    浏览(54)
  • vue 音频可视化

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

    2024年02月03日
    浏览(72)
  • 简单的用Python抓取动态网页数据,实现可视化数据分析

    一眨眼明天就周末了,一周过的真快! 今天咱们用Python来实现一下动态网页数据的抓取 最近不是有消息说世界首富马上要变成中国人了吗,这要真成了,可就是历史上首位中国世界首富了! 那我们就以富豪排行榜为例,爬取一下2023年国内富豪五百强,最后实现一下可视化分

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

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

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

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

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

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

    2024年02月15日
    浏览(45)
  • 记录--关于前端的音频可视化-Web Audio

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

    2024年02月16日
    浏览(47)
  • 界面组件Telerik UI for WPF可轻松实现直方图,让数据可视化更简单

    Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序,同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等,创建的应用程序可靠且结构良好,非常容易维护,其直观的API将无缝地集成Visual Studio工具箱中。 Telerik UI for WPF | 下载试用 (Q技术交流:

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

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

    2024年01月18日
    浏览(44)
  • 可视化监控云平台/智能监控平台EasyCVR国标设备开启音频没有声音是什么原因?

    视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同,支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。GB28181视频平台EasyCVR拓展性强,视频能力丰富,具体可实现视频监控直播、视频轮播、视频录像、云存储、回放与检索、智能告警

    2024年02月04日
    浏览(58)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包