{"id":19545126,"url":"https://github.com/scscms/audiocontext","last_synced_at":"2025-10-18T17:21:55.898Z","repository":{"id":93554579,"uuid":"72167189","full_name":"scscms/AudioContext","owner":"scscms","description":"利用AudioContext绘制精美的随乐而动的频谱图形，回味怀旧的视听盛宴。","archived":false,"fork":false,"pushed_at":"2020-04-13T06:29:19.000Z","size":8894,"stargazers_count":12,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-08T19:23:39.690Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scscms.png","metadata":{"files":{"readme":"README.md","changelog":"changel.png","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-10-28T02:42:29.000Z","updated_at":"2023-03-15T02:51:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"4420af94-96a3-4c24-9f6c-80f5943c7d4d","html_url":"https://github.com/scscms/AudioContext","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FAudioContext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FAudioContext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FAudioContext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FAudioContext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scscms","download_url":"https://codeload.github.com/scscms/AudioContext/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240801040,"owners_count":19859727,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T03:35:02.688Z","updated_at":"2025-10-18T17:21:50.869Z","avatar_url":"https://github.com/scscms.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AudioContext 可视化效果\u003csup\u003eshine\u003c/sup\u003e\n\n![image](https://github.com/scscms/AudioContext/raw/master/vision1.jpg)\n\n## 前言\n\n曾记得以前很多播放器都有那种柱状的随音乐而动的频谱效果，如今的播放器反而越来越少使用此效果了，更多的是配合视频或者歌词来展示。但是那种音频动画一直印在我的脑海，总感觉静静的听歌，思绪随动画而翩翩起舞总觉得另一番享受。\n可惜以前浏览器制作不出此效果，虽然flash能做一点类似效果，无奈flash自身难保。如今H5横行，自然HTML5 Audio API便吹起了春天的暖风，让频谱动画花再次悄然绽放了...\n\n## 1、简介\nWeb Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容。它允许你开发复杂的混音，音效，平移以及更多。在这篇文章里，我们将会通过几个例子来解释web Audio API的基本运用。\n\n一段音频到达扬声器进行播放之前，我们可以使用[window.AudioContext](https://www.w3.org/TR/webaudio/)获取音频数据，创建各种AudioNode，即音频节点。\n不同节点作用不同，有的对音频加上滤镜比如提高音色(比如BiquadFilterNode)，改变单调，有的音频进行分割，比如将音源中的声道分割出来得到左右声道的声音（ChannelSplitterNode），有的对音频数据进行频谱分析即本文要用到的(AnalyserNode)。\n\n这里将要介绍的HTML5音频处理接口与Audio标签是不一样的。页面上的Audio标签只是HTML5更语义化的一个表现，而HTML5提供给JavaScript编程用的Audio API则让我们有能力在代码中直接操作原始的音频流数据，对其进行任意加工再造。就可制作跟随音乐节奏变化的频谱图，也称之为可视化效果。\n\n## 2、流程\n音频节点通过输入与输出进行连接，形成一个链，从一个或多个源出发，通过一个或更多的节点，最终到输出终端（你也可以不提供输出终端，换句话说，如果只是想使一些音频数据可视化）。一个简单经典的web  Audio的工作流程如下：\n\n- 构建音频上下文AudioContext对象；\n- 在AudioContext对象内，构建音源，比如audio，oscillator，stream\n- 构建效果节点effectNode，比如混响，双二阶滤波器，声相，压限器\n- 选择最终的音频目的地，比如说你的系统扬声器\n- 连接源到效果，效果到输出终端\n\n#### 构建AudioContext对象\n首先，你需要构建一个AudioContext实例，来创建一个音频图。最简单的方法就像这样：\n```javascript\nvar audioCtx = new AudioContext();\n//考虑兼容(其实没必要)\nvar audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n```\n#### 创建AudioSource\n现在我们有了AudioContext，可以用这个来做很多事。第一件我们需要做的事是玩音乐。音频可以来自于多样的地方：\n\n* 通过JavaScript直接生成一个音频节点比如oscillator. 一个 OscillatorNode是利用AudioContext.createOscillator 方法来构建。\n* 从原PCM数据构建: AudioContext有解密被支持的音频格式的多种方法。看AudioContext.createBuffer(), AudioContext.createBufferSource(), 以及 AudioContext.decodeAudioData().\n* 来自于HTML音频元素例如 video 或者audio: 可以看 AudioContext.createMediaElementSource().\n* 直接来自于 WebRTC，MediaStream 例如来自于摄像头或麦克风. 可以看AudioContext.createMediaStreamSource().\n\n```javascript\n    const audioCtx = new AudioContext();\n    //为每个键盘位对应一个频率\n    const obj ={65:256,83:288,68:320,70:341,71:384,72:426,74:480,75:512,76:542};\n    for(let key in obj){\n        let value = obj[key];\n        obj[key] = audioCtx.createOscillator();\n        obj[key].frequency.value = value;\n        obj[key].start();\n    }\n    document.addEventListener(\"keydown\",function(e){\n        obj[e.keyCode] \u0026\u0026 obj[e.keyCode].connect(context.destination);\n    },false);\n    document.addEventListener(\"keyup\",function(e){\n        obj[e.keyCode] \u0026\u0026 obj[e.keyCode].disconnect();\n    },false);\n```\n[查看createOscillator](createOscillator.html)\n\n#### 连接输入输出\n为了通过你的扬声器来实际输出音质，你需要将它们连接起来。这个被称为节点连接方法，节点来自于很多可获得的不同节点类型。你想要连接的节点都提供了这个方法。\n\n你的设备的默认输出结构（通常是你的设备扬声器），通过AudioContext.destination来允许进入。为了连接oscillator，gain node以及输出端，如以下运用：\n\n```javascript\noscillator.connect(gainNode);\ngainNode.connect(audioCtx.destination);\n```\n#### 播放音乐及设置音调\n现在audio节点图已经建立，我们可以设置属性值及调用音频节点的方法来调节想要的音效。在这个简单的例子，我们可以设置特殊的音调，以赫兹为单位，设置为特殊类型，以及指示音乐播放：\n\n```javascript\noscillator.type = 'sine'; //其他可选'square','sawtooth','triangle'和'custom'\noscillator.frequency.value = 2500;\noscillator.start();\n```\n\n#### 设置静音\n当静音按钮点击，以下方法会被调用，disconnect方法，将切断gain node与destination节点的链接，有效阻止了节点图的链接，所以没有声音会被产生。再次点击效果相反。\n\n```javascript\nvar mute = document.querySelector('.mute');\nmute.onclick = function() {\n  if(mute.innerHTML != \"Unmute\") {\n    gainNode.disconnect(audioCtx.destination);\n    mute.innerHTML = \"Unmute\";\n  } else {\n    gainNode.connect(audioCtx.destination);\n    mute.innerHTML = \"Mute\";\n  }\n}\n```\n\n### 获取音频文件\n\n- ajax获取　[查看](ajax_decodeAudioData.html)\n- fetch获取　[查看](fetch_decodeAudioData.html)\n- FileReader选择　[查看](FileReader_decodeAudioData.html)\n\n### AudioContext 可视化效果\n\n![image](https://github.com/scscms/AudioContext/raw/master/vision2.jpg)\n\n[查看文件](decodeAudioData.html)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscscms%2Faudiocontext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscscms%2Faudiocontext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscscms%2Faudiocontext/lists"}