php 音乐可视化,HTML5音乐可视化代码详解

闲来无事做了个H5的音乐可视化,下面上主要部分的代码。包含部分AudioContext api的注释。AudioContext api部分,相当于房子的原材料。musicVisualizer.ac = new(window.AudioContext || window.webkitAudioContext)();

//实例化一个音频类型window.AudioContext,后面是为了兼容Chrome浏览器

function musicVisualizer(obj) {

this.source = null; //初始化音频资源变量

this.analyser = musicVisualizer.ac.createAnalyser(); //这一步是非常重要的,createAnalyser()可以创建一个/AnalyserNode/用来获取音频的各项数据,实现音乐可视化

this.size = obj.size; //这里是 index.js里面实例化原型的参数obj中的大小属性

this.analyser.fftSize = this.size * 2;

//fftsize(AnalyserNode的一个属性)是一个无符号长整型的值, 用于确定频域的 FFT (快速傅里叶变换) 的大小.fftSize 属性的值必须是从32到32768范围内的2的非零幂;

其默认值为2048.总之最后获取到的数组长度应该是fftSize值的一半,还应该保证它是以2为底的幂。

this.xhr = new XMLHttpRequest();//这个就很熟悉了对于大家而言,创建ajax对象

this.analyser.connect(musicVisualizer.ac.destination);

//musicVisualizer.ac.destination是音频要最终输出的目标,所有节点中的最后一个节点应该再连接到musicVisualizer.ac.destination播放声音

this.visualizer = obj.visualizer;

//这里是 index.js里面实例化原型的参数obj中的canvas绘画音乐节点实现节奏可视化

this.visualize();

}

musicVisualizer.prototype.load = function(url, fun) {

this.xhr.abort();//停止正在进行的ajax请求

this.xhr.open("GET", url);

this.xhr.responseType = "arraybuffer";

var self = this;

this.xhr.onload = function() {

fun(self.xhr.response);

};

this.xhr.send();

};

musicVisualizer.prototype.decode = function(arraybuffer, fun) {

musicVisualizer.ac.decodeAudioData(arraybuffer, function(buffer) {

//decodeAudioData用于异步解码音频文件中的arrayBuffer数据

fun(buffer);

}, function(err) {

console.log(err);

});

};

musicVisualizer.prototype.stop = function() {

this.source[this.source.stop ? "stop" : "noteOff"](0);

};

musicVisualizer.prototype.visualize = function() {

var arr = new Uint8Array(this.analyser.frequencyBinCount);

//frequencyBinCount通常是可视化数据值的数量,为fftSize的一半

requestAnimationFrame = window.requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame;

//window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法将在重绘之前调用的回调作为参数。

var self = this;

function v() {

self.analyser.getByteFrequencyData(arr);

//getByteFrequmencyData把当前频率数据复制到传入其中的Uint8Array

self.visualizer(arr);

requestAnimationFrame(v);

}

requestAnimationFrame(v);

};

musicVisualizer.prototype.play = function(url) {

var self = this;

this.source && this.stop();

this.load(url, function(arraybuffer) {

self.decode(arraybuffer, function(buffer) {

var bs = musicVisualizer.ac.createBufferSource();

//createBufferSource()

方法用于创建一个新的AudioBufferSourceNode接口, 该接口可以通过AudioBuffer 对象来播放音频数据.

AudioBuffer对象可以通过AudioContext.createBuffer 来创建或者通过 AudioContext.decodeAudioData成功解码音轨后获取.

bs.connect(self.analyser);

bs.buffer = buffer;

bs[bs.start ? "start" : "noteOn"](0);

self.source = bs;

});

});

};H5 canvas可视化部分。原材料的粘合剂var size = 64;

var box = $("#box")[0];

var height, width;

var canvas = document.createElement('canvas');

var ctx = canvas.getContext("2d");

box.appendChild(canvas);

var Dots = [];

draw.type = "column";

window.onresize = resize;

var line;

var mv = new musicVisualizer({

size: size,

visualizer: draw

});

var clickMusic = (function () {

var lis = $(".music li");

lis.click(function() {

var i = $(this).index();

lis.css('color', 'white');

lis.eq(i).css('color', 'grey');

mv.play('./musics/' + lis.eq(i).html());

});

})();

function random(m, n) {

return Math.round(Math.random() * (n - m) + m);

}

function getDots() {

Dots = [];

for (var i = 0; i < size; i++) {

var x = random(0, width);

var y = random(0, height);

var color = "rgba(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ",0)";

Dots.push({

x: x,

y: y,

color: color,

cap: 0,

dx: random(1, 4)

});

};

}

var resize = (function () {

height = box.clientHeight;

width = box.clientWidth;

canvas.height = height;

canvas.width = width;

line = ctx.createLinearGradient(0, 0, 0, height);

line.addColorStop(0, "pink");

line.addColorStop(0.5, "grey");

line.addColorStop(1, "lightblue");

getDots();

})();

function draw(arr) {

ctx.clearRect(0, 0, width, height);

var w = width / size;

var cw = w * 0.6;

var ch = cw;

ctx.fillStyle = line;

for (var i = 0; i < size; i++) {

var o = Dots[i];

if (draw.type == "column") {

var h = arr[i] / 256 * height;

ctx.fillRect(w * i, height - h, cw, h);

ctx.fillRect(w * i, height - (o.cap + ch), cw, ch);

o.cap--;

if (o.cap < 0) {

o.cap = 0;

}

if (h > 0 && o.cap < h + 30) {

o.cap = h + 30 > height - ch ? height - ch : h + 30;

}

} else if (draw.type == "dot") {

ctx.beginPath();

var r = 10 + arr[i] / 256 * (height > width ? width : height) / 10;

ctx.arc(o.x, o.y, r, 0, Math.PI * 2, true);

var circle = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, r);

circle.addColorStop(0, "white");

circle.addColorStop(1, o.color);

ctx.fillStyle = circle;

ctx.fill();

o.x += o.dx;

o.x = o.x > width ? 0 : o.x;

}

}

}

var changeStyle = (function () {

var spans = $(".musicList span");

spans.click(function() {

var i = $(this).index();

spans.removeClass('selected')

.eq(i).addClass('selected');

draw.type = spans.eq(i).attr('type');

});

})();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用\[1\]和引用\[2\]的内容,项目调度可视化大屏主要包括以下几个步骤: 1. 项目分析:对项目需求进行分析,确定需要显示的地图和资源信息。 2. 引入库:引入相关的库和插件,用于地图的展示和功能实现。 3. 项目开发:根据需求进行项目开发,包括地图容器构建、筛选和返回按钮事件、企业筛选功能、百度地图封装等。 4. 核心企业标注:在地图上标注核心企业的位置。 5. 周边资源标注和弹窗:在核心企业周围的5公里范围内标注其他资源的位置,并实现弹窗功能。 6. 路线规划:根据需要计算路径,包括时间和距离。 7. 总结:对项目开发进行总结和评估。 根据引用\[3\]的内容,可以将地图map定义为全局函数,方便在实际开发过程中进行参数的传递。通过创建地图对象、设置地图中心点和缩放级别、添加控件等操作,实现地图的展示和交互功能。 综上所述,项目调度可视化大屏是通过地图展示企业和资源的位置信息,并提供路径计算功能的项目。 #### 引用[.reference_title] - *1* *2* *3* [数据可视化大屏应急管理综合指挥调度系统完整案例详解PHP-API、Echarts、百度地图)](https://blog.csdn.net/weixin_41290949/article/details/128436277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值