html5音频跳动手机版,HTML5音频可视化频谱跳动代码

迷南。 2022-10-07 09:56 178阅读 0赞

HTML5音频可视化频谱跳动代码

\*\{

margin:0;

padding:0;

\}

\#canvas \{

display: block;

background: linear-gradient(135deg, rgb(142, 13, 133) 0%, rgb(230, 132, 110) 100%);

\}

window.οnclick=function () \{if(oAudio.paused) \{

oAudio.play();

\}else\{

oAudio.pause();

\}

\}//创建音频上下文对象

var oCtx = newAudioContext();//console.log(oCtx);//创建媒体源,除了audio本身可以获取，也可以通过oCtx对象提供的api进行媒体源操作

var audioSrc =oCtx.createMediaElementSource(oAudio);//创建分析机

var analyser =oCtx.createAnalyser();//媒体源与分析机连接

audioSrc.connect(analyser);//输出的目标：将分析机分析出来的处理结果与目标点(耳机/扬声器)连接

analyser.connect(oCtx.destination);//效果(实现的具体方法)//绘制音频图的条数(fftSize)

/\*根据分析音频的数据去获取音频频次界定音频图的高度

放在与音频频次等长的8位无符号字节数组

Uint8Array:初始化默认值为1024\*/

//利用cancas渐变进行音频绘制

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

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;var oW =canvas.width;var oH =canvas.height;var color1 = ctx.createLinearGradient(oW / 2, oH / 2 - 30, oW / 2, oH / 2 - 100);var color2 = ctx.createLinearGradient(oW / 2, oH / 2 + 30, oW / 2, oH / 2 + 100);

color1.addColorStop(0, '\#000');

color1.addColorStop(.5, '\#069');

color1.addColorStop(1, '\#f6f');

color2.addColorStop(0, '\#000');

color2.addColorStop(.5, '\#069');

color2.addColorStop(1, '\#f6f');//音频图的条数

var count = 150;//缓冲区:进行数据的缓冲处理，转换成二进制数据

var voiceHeight = newUint8Array(analyser.frequencyBinCount);//console.log(voiceHeight);

function draw() \{//将当前的频率数据复制到传入的无符号字节数组中，做到实时连接

analyser.getByteFrequencyData(voiceHeight);//console.log(voiceHeight);//自定义获取数组里边数据的频步

var step = Math.round(voiceHeight.length /count);

ctx.clearRect(0, 0, oW, oH);for (var i = 0; i < count; i++) \{var audioHeight = voiceHeight\[step \*i\];

ctx.fillStyle= color1; //绘制向上的线条

ctx.fillRect(oW / 2 + (i \* 10), oH / 2, 7, -audioHeight);

ctx.fillRect(oW/ 2 - (i \* 10), oH / 2, 7, -audioHeight);

ctx.fillStyle= color2; //绘制向下的线条

ctx.fillRect(oW / 2 + (i \* 10), oH / 2, 7, audioHeight);

ctx.fillRect(oW/ 2 - (i \* 10), oH / 2, 7, audioHeight);

\}

window.requestAnimationFrame(draw);

\}

draw();/\*analyserNode 提供了时时频率以及时间域的分析信息

允许你获取实时的数据，并进行音频可视化

analyserNode接口的fftSize属性

fftSize:无符号长整型值，用于确定频域的FFT(快速傅里叶变换)

ffiSize属性值是从32位到32768范围内的2的非零幂,默认值是2048\*/\}

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关【html本地工具】html+css+js本地音乐播放器，实现可视化音频频谱

效果 html+css+js本地音乐播放器，实现可视化音频频谱 ![在这里插入图片描述][3283262e75824ceb8aab3234a998ff3c.png_pi

谁借莪１个温暖的怀抱￠/ 2024年03月23日 12:34/ 0 赞/ 40 阅读

相关 Vue中如何进行音频可视化与音频频谱展示

Vue中如何进行音频可视化与音频频谱展示随着音频应用程序的不断发展，音频可视化和音频频谱展示成为了重要的功能。在Vue应用程序中实现音频可视化和音频频谱展示可以帮助用户

清疚/ 2024年03月16日 19:54/ 0 赞/ 67 阅读

相关 HTML5 音频,视频,插件

<body background="images/backgroundImage.png"> <!--<audio>

布满荆棘的人生/ 2024年02月17日 20:48/ 0 赞/ 83 阅读

相关 HTML5 音频播放

一、audio播放   <button οnclick="fun()">播放/

超、凢脫俗/ 2024年02月17日 17:49/ 0 赞/ 61 阅读

相关 html5音频跳动手机版,HTML5音频可视化频谱跳动代码

HTML5音频可视化频谱跳动代码 \\{ margin:0; padding:0; \} \canvas \{ display: block; backgroun

迷南。/ 2022年10月07日 09:56/ 0 赞/ 179 阅读

相关 html音频文件上传,用html5“标签传输音频

我正在尝试使用< audio>在讲座系列中在Dreamhost托管的网站上传输音频.标记在 html5中,但没有太大的成功.实际的代码是我还有一个.htaccess文件,

绝地灬酷狼/ 2022年10月06日 11:51/ 0 赞/ 200 阅读

相关 mp3转换html5,HTML 音频(Audio)

问题: ·标签在HTML 4中是无效的。您的页面无法通过HTML 4验证。 ·您必须把音频文件转换为不同的格式。 ·元素在老式浏览器中不起作用。最好的HTML解决方法

╰+哭是因爲堅強的太久メ/ 2022年10月05日 10:56/ 0 赞/ 263 阅读

相关 HTML5音频视频

1.video 视频元素属性名称说明 src 视频资源的URL width 视频宽度 height 视频高度 autoplay 设置后，表示立刻开始播放视

冷不防/ 2022年09月24日 13:15/ 0 赞/ 348 阅读

相关 html5_音频播放

1. 音频播放 <audio src="audio/1.mp3" controls="controls" autoplay="autoplay"></audio> <

男娘i/ 2022年05月25日 05:08/ 0 赞/ 332 阅读

相关 HTML5 音频 / 视频 DOM 操作

目录 HTML5 音频 / 视频 DOM 操作 HTML5 Audio/Video 方法 HTML5 Audio/Video 属性 HTML5 Audio/Video

清疚/ 2022年05月09日 13:40/ 0 赞/ 276 阅读