HTML5 Canvas 频谱

怼烎@ 2022-08-22 00:01 199阅读 0赞

废话少说，直接贴出代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5音频可视化频谱跳动代码 </title>  
<link rel="stylesheet" type="text/css" href="css/style.css">  
</head>  
<body class="keBody">  
<h1 class="keTitle">HTML5音频可视化频谱跳动代码</h1>  
<div class="kePublic">  
  
<canvas id='canvas' width="800" height="350"></canvas>  
<br>  
<br>  
<audio src="mp3/The Dawn.mp3" id="audio" controls loop>audio element not supported</audio>  
<script src="js/main.js"></script>  
  
<div class="clear"></div>  
</div>  
  
  
</body>  
</html>

main.js

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;  
  
  
window.onload = function() \{  
    var audio = document.getElementById('audio');  
    var ctx = new AudioContext();  
    var analyser = ctx.createAnalyser();  
    var audioSrc = ctx.createMediaElementSource(audio);  
    // we have to connect the MediaElementSource with the analyser   
    audioSrc.connect(analyser);  
    analyser.connect(ctx.destination);  
    // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)  
    // analyser.fftSize = 64;  
    // frequencyBinCount tells you how many values you'll receive from the analyser  
    var frequencyData = new Uint8Array(analyser.frequencyBinCount);  
  
  
    // we're ready to receive some data!  
    var canvas = document.getElementById('canvas'),  
        cwidth = canvas.width,  
        cheight = canvas.height - 2,  
        meterWidth = 10, //width of the meters in the spectrum  
        gap = 2, //gap between meters  
        capHeight = 2,  
        capStyle = '\#fff',  
        meterNum = 800 / (10 + 2), //count of the meters  
        capYPositionArray = \[\]; store the vertical position of hte caps for the preivous frame  
    ctx = canvas.getContext('2d'),  
    gradient = ctx.createLinearGradient(0, 0, 0, 300);  
    gradient.addColorStop(1, '\#0f0');  
    gradient.addColorStop(0.5, '\#ff0');  
    gradient.addColorStop(0, '\#f00');  
    // loop  
    function renderFrame() \{  
        var array = new Uint8Array(analyser.frequencyBinCount);  
        analyser.getByteFrequencyData(array);  
        var step = Math.round(array.length / meterNum); //sample limited data from the total array  
        ctx.clearRect(0, 0, cwidth, cheight);  
        for (var i = 0; i < meterNum; i++) \{  
            var value = array\[i \* step\];  
            if (capYPositionArray.length < Math.round(meterNum)) \{  
                capYPositionArray.push(value);  
            \};  
            ctx.fillStyle = capStyle;  
            //draw the cap, with transition effect  
            if (value < capYPositionArray\[i\]) \{  
                ctx.fillRect(i \* 12, cheight - (--capYPositionArray\[i\]), meterWidth, capHeight);  
            \} else \{  
                ctx.fillRect(i \* 12, cheight - value, meterWidth, capHeight);  
                capYPositionArray\[i\] = value;  
            \};  
            ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look  
            ctx.fillRect(i \* 12 /\*meterWidth+gap\*/ , cheight - value + capHeight, meterWidth, cheight); //the meter  
        \}  
        requestAnimationFrame(renderFrame);  
    \}  
    renderFrame();  
    audio.play();  
\};

注：存在跨域问题在google chrome 浏览器40 以下好用，官方解释40 以上不更新，哪位朋友有好的解决方案可以 留言交流。

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas 元素本身是没有

雨点打透心脏的1/2处/ 2023年07月12日 14:21/ 0 赞/ 26 阅读

相关 html5 -- Canvas

Canvas绘制简单图形一、绘制文字　　fillText(text, x, y\[, maxWidth\]) -- 填充方式　　strokeText(tex

我会带着你远行/ 2023年06月05日 05:44/ 0 赞/ 25 阅读

相关 HTML5 Canvas

Canvas画布描述获取方式注意点画布API 上下文API 颜色、样式和阴影线条样式

落日映苍穹つ/ 2023年01月10日 13:13/ 0 赞/ 177 阅读

相关 HTML5：Canvas 标签

什么是 canvas？ H5 `<canvas>` 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。`<canvas>` 标签只是图形容器，必须使用脚本

逃离我推掉我的手/ 2022年10月11日 13:33/ 0 赞/ 334 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 281 阅读

相关 html5canvas网格制作,HTML5 Canvas网格变换

JavaScript 语言： JaveScriptBabelCoffeeScript 确定 (function() \{ var TriangleGrid, anim

╰+攻爆jí腚メ/ 2022年10月06日 13:50/ 0 赞/ 246 阅读

相关 HTML5 Canvas 频谱

废话少说，直接贴出代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5音频

怼烎@/ 2022年08月22日 00:01/ 0 赞/ 200 阅读

相关 HTML5 canvas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年07月19日 11:48/ 0 赞/ 286 阅读

相关 HTML5Canvas

Canvas -> 做游戏：白鹭引擎、trees... 动画图表、频谱画图 HTML5 不只是单纯HTML 本身是一个标签 <canvas></canva

素颜马尾好姑娘i/ 2022年06月10日 05:19/ 0 赞/ 319 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 384 阅读