未加星标

Drum Loops and Effects with Web Audio API

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Before we start, just a note: you might want to read thisintroductory post first if you are new to Web Audio API.

OK, now let's create some drum loops :wrench::hammer::loud_sound:! First we need to load a drum sound clip. By using fetch() and promises to load and decode an audio file the code becomes easy to read. The audio data is stored in a global variable called buffer (yes I'm lazy). Have a look at the javascript code in the embedded Pen below. The downside of using fetch() is that it is not supported in all browsers (I told you I'm lazy).

Drum Loop

Let's do something we can hear: play a looping beat.

To play the audio buffer we loaded we need a BufferSource which we connect to the output. Continuing the studio analogy from my other blog post:

AudioContext is the sound studio where all the equipment lives, buffer (that we already loaded) is an mp3 file, The BufferSource is an mp3 player created like this: source = context.createBufferSource(); Load the mp3 file in the mp3 player: source.buffer = buffer; context.destination is the speakers. The .connect() method is the wire, Connect the mp3 player to the speakers: source.connect(context.destination);

Good, all hooked up!

The sound clip is just 1.8 seconds long but looping is as easy as: source.loop = true; . Now it will play in a gapless loop until you click Stop.

Hit the play button on the mp3 player with source.start() .

Trivia: do you know what the beat is called and where it comes from? (It's not the whole sample, I just took a bar/measure.) Answer in the comments below :)

"But hey! Why are we recreating, connecting and configuring all of this stuff from scratch every time Start is clicked?!"

Good question! You see, once a BufferSource is stopped you can't start it again. The MDN documentation about stop() says:

If this method is called twice or more, an exception is raised.

Recreating everything over and over again is totally OK, it's the intended way of working. Those operations are cheap, don't be afraid, later we are going to trigger a whole slew of BufferSource s to play... :smiling_imp: But first:

The Phaser Effect

Back in 1996, I was a big fan of Chemical Brothers. I must have listened to their album "Exit Planet Dust" a thousand times. On the track "Song To The Siren", at 2.01, there is this phaser effect on the drum loop that I thought sounded very cool.


Drum Loops and Effects with Web Audio API

We can easily create the same sort of effect with Web Audio API by starting two loops of the same beat but setting the playback rate on one slightly faster than the other. Over time they will drift away from each other, going from phaser to echo to chaos to headache. :hear_no_evil:

To get the two loops to start at the exact same time I'm reading the currentTime property on the AudioContext and using it as a parameter in the two calls to start() .

If you listen for a while you will hear the two loops becoming more and more out of synch. I think the Chemical Brothers adjusted the playback rate continuously so that the two loops drifted back together again.

The Aphex Twin Effect

Aphex Twin is an artist that experiments a lot with sounds. Sometimes to a point where the result is more abstract sound art than a song. To me, his signature effect is triggering drums tightly and aggressively creating a metallic robotic stutter effect.


Drum Loops and Effects with Web Audio API

We are going to use the same drum beat as we did before. It is sliced in short peaces and scheduled to be played with a for loop in the code. You can control the slice size, delay, overlap and slice duration with the sliders.

To the AudioBufferSourceNode.start() method you can specify three parameters (all three are optional):

When to start Offset - where in the audio buffer to start Duration - for how long we should play the sound

With these three parameters we can get the slices to be played with a slight overlap to create a stuttering effect.

Note that you can click the Result button to hide the result tab and automatically expand the JS tab. It's easier to read the code that way. =)

That's it for now, thank you for reading. Go ahead and f0rk my Pens and start experimenting. Share the result in the comments below.

My inspiration for doing some more Web Audio API Pens and writing this post came from:

Sounds fun by Jake Archibald JavaScript Systems Music -- Learning Web Audio by Recreating The Works of Steve Reich and Brian Eno by Tero Parviainen. Very interesting, superbly written, lots of code examples - a must read :+1:.

Other blog posts I have written about Web Audio API:

Fun with Web Audio API - already mentioned in the begining. More Fun with Web Audio API - creating reverb with ConvolverNode and more.

I also have a CodePen Collection with allmy Web Audio Pens.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJava
分页:12
转载请注明
本文标题:Drum Loops and Effects with Web Audio API
本站链接:http://www.codesec.net/view/519338.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(32)