Rock it HTML5! Sound frontend interaction! (1) Rock html5 front-end Interaction

Rock it HTML5! Sound frontend interaction! (1) Rock html5 front-end Interaction

At the beginning of life, the baby uses the Bright cry to declare the birth of a new life. Before opening his eyes, a pair of small ears began to listen to the world. In today's user experience field, almost all companies have visual designers, but few companies focus on auditory interaction. With the increasing improvement of HTML5 support by major manufacturers, front-end engineers have long been able to play with various audio waves, allowing compound development to go further.

Sound waves are mechanical waves. We can do a lot of things through the physical properties of waves. For example, you can use the acoustic frequency encoding to transmit data, analyze the data in the frequency or time domain for visualization applications, or combine the characteristics of light waves to make audio-visual interactions. All of the above can be implemented through the Web Auido specification in HTML5. In my ownGithubA project is created in the project, and some web audio-related items previously written are organized. You are welcome to learn from each other.

The journey of a thousand miles begins with the beginning of this series. I will start from how to use HTML5 to send do, ri, mi.

The so-called music is composed of the value and the sound height. Here, each pitch has its own frequency. In web audio, you can use the oscillator node to generate sound at a specified frequency. The Code is as follows:

1 var context = new webkitAudioContext(),2     osc  = context.createOscillator();3 osc.frequency.value = 440;4 osc.connect(context.destination);5 osc.start(0);

Through the value of the frequency attribute of the osc object, the above Code generates a limit Hz sound. When running the code browser, it will continue to sound at the frequency Hz. In the 12 average law, this is the A1 pitch. With this benchmark sound, we can split the frequency of other sounds and let the browser make different Pitch sounds. As for the relations in each center, we need to first introduce the 12 average law.

In music theory, each group of sounds consists of 12 sounds, whose names are C, C #, D, D #, E, F, F #, G, G #,, A #, B, each two sounds have A half difference, and the frequency ratio of each adjacent half sound is 2 ^ (1/12 ). B is C, and enters the next loop. A1 is the frequency value of A in group 1. According to the ratio of the half tone frequency, the frequency of A # in group 1 is 440*2 ^ (1/12) HZ.

Because the pitch of these sounds is certain and the quantity is limited, we can calculate and store the frequency values of these sounds in advance to avoid repeated computation. Readers can determine the number of pitch to be initialized based on their individual needs.

var MusicalAlphabet = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'],    freqChat={},    freqRange=3,//C1-B3    i,j,base;for(i=1;i<freqRange;i++){    freqChat[i]={};    base = (i-1)*12;    for(j=0;j<12;j++){        //A1=440        freqChat[i][MusicalAlphabet[j]]=440*Math.pow(2,(base+j-9)/12);    }}

In natural C Major, we select C, D, E, F, G, A, and B to form A group of sounds. Their names correspond to do, ri, mi, fa, so, la, and si. The pitch only corresponds to the audio name and has nothing to do with the singing name. With the frequency of each pitch, we can easily initialize various adjustment modes. If you do not know the music, you can search and learn by yourself.

With the pitch, the next thing to learn is the value. To control the sound length of a note, the most direct method is to call the start and end methods of the oscillator node. The Code is as follows:

1 var context = new webkitAudioContext();2 var osc  = context.createOscillator();3 osc.frequency.value = 440;4 osc.connect(context.destination);5 var _c = context.currentTime;6 osc.start(_c);7 osc.stop(_c+1);

It should be noted that web audio has its own timeline, and the current time can be obtained through the currentTime attribute of the context object. According to W3C specifications, This is a read-only attribute. The start and end parameters of the oscillator are both double type. Therefore, osc. stop (_ c + 1) indicates that the oscillator is stopped after 1 second. The number on a common shooting device indicates the number of beats per minute. In this example, the physical time of each beat can be obtained simply by division.

With the most basic sound height and value, we can write the simplest music. Of course, playing skills, such as slide, vibrato, and upstreaming, and other effects such as distortion and reverb require assistance from other web audio nodes, I will talk about these nodes and some of the technologies mentioned in the beginning in my blog.

Indicate the source for forwarding: Http://www.cnblogs.com/Arthus/p/4071049.html