wallpaper 音频响应实现

您所在的位置：网站首页 › 动态壁纸音乐响应 › wallpaper 音频响应实现

wallpaper 音频响应实现

2023-09-19 11:46| 来源: 网络整理| 查看: 265

平台：steam | wallpaper engine 相关链接：创建网页壁纸 Web wallpaper用户自定义属性实现音频响应

平台：steam | wallpaper engine

相关链接：

创建网页壁纸

Web wallpaper用户自定义属性

实现音频响应

创建音频侦听器

音频音量级别数据

启用音频响应：

实现思路：

完整实例（复制即可用）

创建音频侦听器

首先我们要创建一个函数。该函数有一个参数。例如：function wallpaperAudioListener ( audioArray ) { };

wallpaper engine 提供一个函数：window.wallpaperRegisterAudioListener 用来注册监听事件。

wallpaper engine 会调用 window.wallpaperRegisterAudioListener 注册的监听事件，并传入一个参数，参数为当前音频音量级别。

function wallpaperAudioListener(audioArray) { // Handle audio input here } window.onload = function() { window.wallpaperRegisterAudioListener(wallpaperAudioListener); }; 音频音量级别数据

音频数据：数组元素0 直到 63包含左侧通道的音量级别。数组元素64 直到 127包含右通道的音量级别。数组中一共128个元素。每个数组通常包含从 0.00 到 1.00 的浮点值。0.00 表示特定频率当前未播放任何声音，1.00 表示频率以最大音量播放。补充一点：理论上来是0-1的值，但是声音经过不同驱动或者程序处理之后就会发生变化。例如音乐播放器的音效和耳机的驱动等，都会让数值大于1，甚至会到10，或者会出现整体都很小的情况，例如整体都趋近小于0.001。

启用音频响应：

需要在project.json中通过一个标识符来开启音频响应。这个表示符就是： "supportsaudioprocessing" : true

在新版本的wallpaper engine好像不需要手动去添加上这个标识符。

下图示例：

{ "file" : "index.html", "general" : { "properties" : { "schemecolor" : { "order" : 0, "text" : "ui_browse_properties_scheme_color", "type" : "color", "value" : "0 0 0" } }, "supportsaudioprocessing" : true }, "title" : "test", "type" : "Web" } 实现思路：通过window.wallpaperRegisterAudioListener 注册指定的方法处理获取数据。数据通常为0.0-1.0的浮点数据数组。根据浮点数组的数据，计算音频响应线条的数据：高度，宽度，间距等等。通过canvas绘制出来即可完整实例（复制即可用）

采用ES6语法实现。

自行了解：window.requestAnimationFrame方法

body { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } #audio-canvas { height: 100vh; width: 100vw; position: absolute; /*！！！底部任务栏！！！这个属性应该交给用户去指定*/ bottom: 35px; } Test let audioCanvas; window.onload = function () { //实例化对象 audioCanvas = new AudioCanvas(); //判断是否有wallpaperRegisterAudioListener if (window.wallpaperRegisterAudioListener) { //注册事件 window.wallpaperRegisterAudioListener(function (date) { audioCanvas.dataProcessing(date); }); //开始绘制 audioCanvas.draw(); } } class AudioCanvas { /** * 画板 */ audioCanvas; /** * 画布 */ audioCanvasCtx; /** * 画布宽度 */ audioCanvasCtxWidth; /** * 音频数据 */ audioArray = []; /** * 间距 */ spacing = 6; /** * 线的宽度 */ lineWidth; /** * 总数 */ amount; /** * 颜色 */ color; /** * 构造方法初始化 */ constructor() { this.audioCanvas = document.getElementById('audio-canvas'); //必须通过属性设置宽高，不能通过CSS属性！会有问题呢 this.audioCanvas.height = window.innerHeight; this.audioCanvas.width = window.innerWidth; this.audioCanvasCtxWidth = window.innerWidth; this.audioCanvasCtx = this.audioCanvas.getContext('2d'); this.color = 'rgb(255,0,0)'; } /** *数据处理，负责处理数据。例如线的宽度，总数，以及线幅度数据。 * @param array */ dataProcessing(array) { //总数 this.amount = array.length; //音频数据：数组元素0 直到 63包含左侧通道的音量级别。数组元素64 直到 127包含右通道的音量级别。数组中一共128个元素 //每个数组通常包含从 0.00 到 1.00 的浮点值。0.00 表示特定频率当前未播放任何声音，1.00 表示频率以最大音量播放。 for (let i = 0; i < this.amount; i++) { //补充一点。理论上来是0-1的值，但是声音经过不同驱动或者程序处理之后就会发生变化， // 例如音乐播放器的音效和耳机的驱动等，都会让数值大于1，甚至会到10，或者会出现整体都很小的情况，例如整体都趋近小于0.001 //array[i] *=10; //这里根据需要，写一个算法自动的缩放合适的倍数即可。 //大于一的设置为1 (array[i] > 1) && (array[i] = 1); //最终高度 = 幅度 * 画板高度; array[i] *= this.audioCanvas.height; } this.audioArray = array; //线的宽度 = （画板宽度 - （间距 * 总数）） / 总数 ; this.lineWidth = (this.audioCanvasCtxWidth - (this.spacing * this.amount)) / this.amount; } /** * 绘制 * 此方法只关注绘制，直接将数据绘制出来 */ draw() { let t = this; //清空画板 this.audioCanvasCtx.fillStyle = 'rgb(255,255,255)'; this.audioCanvasCtx.fillRect(0, 0, this.audioCanvas.width, this.audioCanvas.height); //画笔颜色 this.audioCanvasCtx.fillStyle = this.color; //循环绘制 for (var i = 0; i < this.amount; ++i) { this.audioCanvasCtx.fillRect((this.lineWidth + this.spacing) * i, this.audioCanvas.height - this.audioArray[i], this.lineWidth, this.audioArray[i]); } //窗口绘制 window.requestAnimationFrame(function () { t.draw(); }); } }

【本文地址】

wallpaper 音频响应实现

wallpaper 音频响应实现

今日新闻

推荐新闻