这是最终完成的效果:
首先,先创建一个基础web项目结构
Snipaste_2019-03-26_10-06-10.png
在index.html中创建canvas标签
<!DOCTYPE html>
<html>
<head>
<title>text</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<canvas id="audios" width="1920" height="1080"></canvas>
</body>
</html>
然后是基础的css样式
* { margin: 0; padding: 0; }
html, body {
height: 100%; width: 100%;
background-image: url(../img/a.png);
background-size:100% 100%;
}
canvas {
display: block;
position:absolute;
top:0px;
left:0px;
}
img{
height: 100%;
width: 100%;
}
body::-webkit-scrollbar {
display: none;
}
然后剩下的代码就全都在js中完成了,不过在这之前,要先把这个项目先导入到wallpaper engine当中
导入之后右键在资源管理器中打开,找到生成的project.json文件,在"general"下加入
"supportsaudioprocessing" : true,
{
"file" : "index.html",
"general" :
{
"supportsaudioprocessing" : true,
"properties" :
{
"schemecolor" :
{
"order" : 0,
"text" : "ui_browse_properties_scheme_color",
"type" : "color",
"value" : "0 0 0"
}
}
},
"title" : "教程用",
"type" : "web"
}
这行的作用是让这个壁纸能够接收音频输出,在js文件夹下创建新的js文件,命名为main.js
先写入它所提供的音频接口
function wallpaperAudioListener(audioArray) {
console.log(audioArray)
}
window.onload = function() {
window.wallpaperRegisterAudioListener(wallpaperAudioListener)
}
保存所有文件,在wallpaper engine中使用此壁纸,如果所有修改正确的话,在选择壁纸之后壁纸属性中会多出一个录音属性
如果没有的话可以尝试切换一次壁纸之后再看看
在软件的 设置>常规>CEF 开发工具端口 中自定义一个端口值用于调试
此时打开浏览器,在地址栏中输入http://localhost:你的端口号就能够打开wallpaper engine的web壁纸调试页面
点击进入后在页面右方就能够看见目前接收到的音频数据了
当然这个数据我们是不可能直接使用的所以我们要先简单的处理一下
(这里我将使用最简单的方法来处理数据,因此大家仅做参考即可)
//创建数组用于接收音频数据
var arr = new Array(128)
//循环将音频数据传给数组
for (var i = arr.length/2 - 1; i >= 0; i--) {
//合并左右声道
arr[i] = (Math.floor(audioArray[i]*1000) + Math.floor(audioArray[arr.length/2+i]*1000))/2
}
这是我处理好的数据
有了数据之后,接下来就应该让数据变成频谱显示在桌面上了,创建一个对象,来操作canvas标签,array用于接收处理好的数据
function audios(array){
//添加画布
var canvas = document.getElementById("audios")
//设置画布属性为2d
var ctx = canvas.getContext("2d")
}
用for将接收到的音频数据绘制成矩形
//开始绘制
//每次绘制之前清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath()
//生成左上角位置
var jx_left = 0;
//矩形宽度
var jx_width = 9
//间距
var spacing = 1
//遍历数组绘制矩形
for (var i = 0; i <= array.length/2-1; i++) {
//音轨高度
var jx_height = 0
//生成矩形
ctx.rect(jx_left, jx_height, jx_width, array[i])
//下一个矩形的位置
jx_left += jx_width+spacing
}
//矩形颜色
ctx.fillStyle = "#fff"
//填充
ctx.fill()
//结束
ctx.closePath()
此时刷新调试页面,在你屏幕的左上角便会出现音轨了
剩下的就是各种美化了,这是我稍微加了一些代码之后的效果
第一次写教程还请多多指教.
网友评论