- 综合排序
- 最热优先
- 最新优先
- 来自专栏杨焱的专栏
网页纯JS通过AudioContext播放声音
var AudioContext = AudioContext || webkitAudioContext, context = new AudioContext, canClick
6.8K20编辑于 2021-12-07 - 来自专栏糊一笑
模拟制作网易云音乐(AudioContext)
大致上来说就是通过window上的AudioContext方法来创建一个音频对象，然后连接上数据，分析器和音量控制。最后通过BufferSourceNode的start方法来启动音频。 buffer) { // 如果音频是关闭状态，则重新新建一个全局音频上下文 if (ac.state === 'closed') { ac = new (window.AudioContext 最开始我也不知道怎么做播放和暂停，但是好在天无绝人之路，意外发现在全局的AudioContext上有两个方法resume/suspend，这也是实现播放和暂停的两个方法。 三、手机端会有的问题 之前说过，建议不要在手机端运行，因为会有一些问题，主要表现在： AudioContext需要兼容，我在Chrome和Safari测试的时候一直得不到音频数据，之后才发现需要兼容写法 最开始加载音频的时候，AudioContext默认的状态是suspended，这也是我最开始最纳闷的事，当我点击播放按钮的时候没有声音，而点击跳播的时候会播放声音，后来调试发现走到了resumeAudio
2.4K50发布于 2018-05-09 - 来自专栏全栈开发那些事
微信小程序录音与音频播放控制功能
AudioContext实例对象可通过wx.createAudioContext接口获取，它通过id跟一个
6K20编辑于 2023-02-25 - 来自专栏Creator星球游戏开发社区
使用 Cocos Creator 开发动感音乐游戏！
正文 说明 在浏览器端 AudioContext 是一个专门用于音频处理的接口，工作原理是将 AudioContext 创建出来的各种节点相互连接，音频数据流经这些节点,我们对其控制。 ? let AudioContext = window.AudioContext; let audioContext = new AudioContext(); 通过 audioContext 我们可以创建资源节点 let AudioContext = window.AudioContext; // audioContext 只相当于一个容器。 let audioContext = new AudioContext(); // 要让 audioContext 真正丰富起来需要将实际的音乐信息传递给它的。 this.audioBufferSourceNode = audioContext.createBufferSource(); // 将 AudioBuffer 传递进去。
2.8K10发布于 2019-12-16 - 来自专栏web编程技术分享
【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）
//1:音频上下文 window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext = new window.AudioContext(); var flag = null; //控制是否解析的开关变量 //拿到播放器去解析音乐文件 var audioBufferSouceNode = audioContext.createMediaElementSource(audio); audio.onplay = function(){ flag = true; //创建解析对象 var analyser = audioContext.createAnalyser(); parse(analyser,function(array){ console.log flag){ return; } audioBufferSouceNode.connect(analyser); analyser.connect(audioContext.destination
1.2K50发布于 2018-05-17 - 来自专栏Tuzei的笔记
[前端]利用WebAudioAPI获取音频频谱（html5音频可视化）
是从audioContext开始创建之后开始计算的 代码： var Visualizer = function(config) { this.audioContext = null; this.analyser _analyser(); }, _prepare: function () { //实例化一个音频上下文类型window.AudioContext。 window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext ; try { this.audioContext = new AudioContext(); } catch (e) { // 这个AudioContext的destination也就相关于speaker（扬声器）。
4.5K00发布于 2020-03-16 - 来自专栏腾讯云终端专家服务
TRTC Web端 仿腾讯会议麦克风静音检测
= new AudioContext(); meter = createAudioMeter(audioContext); mediaStreamSource = audioContext.createMediaStreamSource ,clipLag);你正在使用的audioContext。 执行 createAudioMeter，用音频上下文audioContext，创建 meter（计量表）对象 3. 将 mediaStreamSource 连接至 meter 中 audioContext; 4. ,clipLag);你正在使用的audioContext。
3.2K50发布于 2021-04-27 - 来自专栏不会跳舞的鸟
用 JS 把 Video 转为 Audio
var videoSrc = 'http://otof18y9e.bkt.clouddn.com/frag_bunny.mp4' function startSelect(){ var audioContext = new OfflineAudioContext(2, 44100 * 100, 44100); // var audioContext = new window.AudioContext() videoFileAsBuffer = new Promise(requestVideo) videoFileAsBuffer.then(function (data) { console.log(data) audioContext.decodeAudioData ).then(function (decodedAudioData) { mySoundBuffer = decodedAudioData soundSource = audioContext.createBufferSource () soundSource.buffer = mySoundBuffer soundSource.connect(audioContext.destination)
5.7K40编辑于 2022-11-16 - 来自专栏零域Blog
又做了一个WEB端的音频可视化
这次在WEB上完成这个功能主要还是要用到WEB AUDIO相关的API，其主要操作流程就是： 声明一个AudioContext(音频上下文)，我们的一些相关音频的操作都会在这个环境下操作，通过new AudioContext 需要一个AudioBufferSourceNode对象，它代表一个音频源，通过AudioContext的createBufferSourceAPI来创建，它还需要一个AudioBuffer类型的音频资源 利用AudioContext.decodeAudioData()方法从一个音频文件构建，或者利用 AudioContext.createBuffer()从原始数据构建。 最后我们还需要一个实时分析当前音源获取频域和时域信息的对象，用来画出我们所看到的可视化频谱，通过AudioContext的AnalyserNodeAPI即可创建，这一步也是做可视化音乐重要的一步，前面的都是加载音频播放 => { console.log('end') } // 点击stop function stop () { source.onended = null source.stop() } AudioContext
1.1K30编辑于 2022-03-28 - 来自专栏Article
前端音频合成
AudioContext 是什么？ audio = new AudioContext(); 适用场景 音频可视化 音频剪辑处理 兼容性 移动端兼容性不错，PC端使用时加上私有前缀。 window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext audioContext.decodeAudioData(arraybuffer, (buffer) => { resolve(buffer) }) 运行流程 AudioContext Api 在 Mac 中，通过设置扬声器采样率，AudioContext 的 sampleRate 也会随之发生变化。
2.2K20编辑于 2022-06-15 - 来自专栏web编程技术分享
【H5 音乐播放实例】第五节 音轨制作
html; //添加音轨 var audio = document.getElementById("music"); //1:音频上下文 window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext = new window.AudioContext(); var flag = null; //控制是否解析的开关变量 //拿到播放器去解析音乐文件 var audioBufferSouceNode = audioContext.createMediaElementSource(audio); audio.onplay = function(){ flag = true; //创建解析对象 var analyser = audioContext.createAnalyser(); parse(analyser,function
80240发布于 2018-07-04 - 来自专栏神光的编程秘籍
用 Three.js 和 AudioContext 实现音乐频谱的 3D 可视化
做个音乐频谱的可视化，最终效果是这样的： 代码地址在这里：https://github.com/QuarkGluonPlasma/threejs-exercize 这个效果的实现能学到两方面的内容： AudioContext 思路分析 要做音乐频谱可视化，首先要获取频谱数据，这个用 AudioContext 的 api。 AudioContext 的 api 可以对音频解码并对它做一系列处理，每一个处理步骤叫做一个 Node。 我们这里需要解码之后用 analyser 来拿到频谱数据，然后传递给 audioContext 做播放。 本文我们既学了 AudioContext 获取音频频谱数据，又学了用 Three.js 做 3D 的绘制，数据和绘制的结合，这就是可视化做的事情：通过一种合适的显示方式，更好的展示数据。
3.2K30编辑于 2021-12-04 - 来自专栏前端达人
浏览器里藏着一个专业音频工作站？揭秘Web Audio API的硬核玩法
二、核心概念:AudioContext是个什么东西? 在深入代码前,先理解一个关键概念——AudioContext(音频上下文)。 用个接地气的比喻 把AudioContext想象成一个虚拟的录音棚: 录音棚布局(AudioContext) │ ├─ 音源区(Source Nodes) │ ├─ 麦克风(MediaStreamSource 完整代码实现 class AudioPlayer { constructor() { this.audioCtx = new AudioContext(); this.source = AudioContext复用 错误示范: // ❌ 每次播放都创建新的Context function playSound() { const ctx = new AudioContext(); 下次当你再听到产品经理说"能不能给这个按钮加个音效"时,别再说"臣妾做不到"了——打开DevTools,敲下 new AudioContext(),开始你的音频创作之旅吧。
11310编辑于 2026-03-12 - 来自专栏前端达人
分享11个高级前端开发工程师都应该掌握的Web API
11、AudioContext AudioContext可以用来处理音频，可以用来实现音频播放、音效处理等功能。 const audioContext = new AudioContext(); fetch("https://example.com/audio.mp3") .then((response) => response.arrayBuffer()) .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer)) .then((audioBuffer ) => { const source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect (audioContext.destination); source.start(); }); 使用场景：在Web应用中，可能需要实现音频播放、音效处理等功能，而这些功能可以通过使用AudioContext
39510编辑于 2024-01-19 - 来自专栏音视频技术概要
chrome 66自动播放策略调整
音频元素 原生播放音频除了使用audio标签之外，还有另外一个API叫AudioContext，AudioContext接口表示由音频模块连接而成的音频处理图，每个模块对应一个AudioNode。 AudioContext可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为一切都发生在这个环境之中。 AudioContext播放声音 先请求音频文件，放到ArrayBuffer里面，然后用AudioContext的API进行decode解码，解码完了再让它去play。 AudioContext创建时机 页面加载时创建 那么resume()在用户与页面进行交互之后（例如，用户单击按钮），您必须在某个时间进行调用。 // Existing code unchanged. window.onload = function() { var context = new AudioContext(); // Setup
6.4K20发布于 2020-10-29 - 来自专栏QQ音乐技术团队的专栏
Web Audio API 介绍和 web 音频应用案例分析
Web Audio API节点介绍 Web Audio API处理web音频的过程：AudioContext产生实例节点，音频在每个节点中按次序连通。 每个AudioContext对象可以一多个音频源节点实例，但是只能有一个目的节点实例。AudioContext的中间节点实例可以对音频进行处理，如音频可视化、音效处理。 AudioContext AudioContext是Web Audio API的核心对象。所有的audio 节点实例由AudioContext生成。 var audioContext = new AudioContext(); 不同浏览器厂商实现AudioContext有所差异，可以加上对应前缀进行兼容。 5 注意问题 audioContext解码blob:数据在chrome目前（56.0.2914.3）还不支持，firefox已提供接口解决。
9.6K11发布于 2017-11-21 - 来自专栏前端漫步
Threejs进阶之十六：音频可视化
常用属性 context：Web Audio API的AudioContext对象，表示AudioListener对象所处的一个音频环境。 gain：对整个场景的音量或增益进行控制。 然后，可以通过调用listener的setMasterVolume()方法来设置所有音频的音量大小 AudioContext类 AudioContext是Web Audio API中的音频上下文环境，用于处理音频数据 在Three.js中，AudioContext类用于创建一个用于处理音频的上下文环境，可以用于创建和控制音频节点。在AudioListener和AudioLoader 类中被使用。 常用方法 .getContext () : AudioContext类型；如果定义了，返回给外部context的值, 否则创建一个新的AudioContext。 .setContext ( value : AudioContext ) : AudioContext类型；外部用来设置 context 的值。
1K40编辑于 2023-10-14 - 来自专栏smy
FLV提取AAC音频单独播放并实现可视化的频谱
AnalyserNode是一个节点名称，并不是html5的API，它可以通过 AudioContext 创建。 (); AudioContext 即为本文实现方案的一个重点API，它是html5处理音频的API，MDN中解释如下： AudioContext接口表示由音频模块连接而成的音频处理图，每个模块对应一个 AudioContext可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为一切都发生在这个环境之中。 AudioBuffer可以用AudioContext 接口的 decodeAudioData() 方法异步解码音频文件中的 ArrayBuffer。 = new AudioContext(); var analyser = audioContext.createAnalyser(); analyser.fftSize = 256;
3K61发布于 2019-05-15 - 来自专栏前端开发0202
WebAudio API
webAudio API webAudio API接口可以用来实现音乐可视化、音频剪辑、修声、语音、去声等等强大的操作 webAudioAPI接口关系图： AudioContext AudioContext 是所有音频操作的前提，一个类似Canvas的ctx的上下文对象 var ac = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext type="button" value="停止" onclick="music.pause()"> //点击停止音乐 <script> var ac = new (window.AudioContext source.connect(ac.destination); </script> 使用input[type=file]创建 （可以本地获取） var audioCtx = new window.AudioContext / Data.length) * 1.5, Data[i] ); } } var ac = new (window.AudioContext
1.5K20发布于 2020-05-09 Tone.js —— Web Audio 框架中文使用指南
triggerAttackRelease的第三个(可选)参数是音符在AudioContext时间内应该播放的时间。它可以用于计划未来事件。 AudioContext时间是Web Audio API用来安排事件的时间，随当页面加载时从0开始，以秒为单位进行计数。 获取当前AudioContext时间setInterval(() => console.log(Tone.now()), 100);Tone.js 抽象了AudioContext时间。 音频上下文js在加载时创建一个AudioContext，并使用标准化的audio-context填充它以获得最大的浏览器兼容性。 AudioContext可以在Tone.context中访问。或者使用Tone.setContext(AudioContext)设置自己的AudioContext。
2.3K10编辑于 2024-03-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号