Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve dynamic audio map in html5, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Summary

This time we will use html5 and js to develop a dynamic audio map.

Technical points used: (1) js (2) canvas + audio (3) Web Audio API

Implementation method:

(1) first of all, considering the implementation of the interface, because there are so many blocks, it is very difficult for us to use traditional dom nodes to implement (it will take up a lot of computer CPU). Here, we consider using canvas for rendering. (2) in the front end, we follow the principle of using js to control dom nodes as little as possible. Do not use js to achieve special effects that can be achieved with css3. Because js is not a markup language, but a scripting language, it is not the same language as html5. Will waste a lot of browser time loading, resulting in a waste of browser performance). Therefore, use less dom with js and css as much as possible with dom. (3) perform audio operations on audio nodes through Web Audio API (that is, audio visualization)

Audio context provides a systematic approach to audio processing. The input source refers to the music file, which is introduced by name; the effect is to process the input source, such as making audio map, sound map, 3D surround, bass sound effect, etc.; output is to output the effect to headphones, speakers and other destinations.

Canvas introduction

At present, except for the layout using dom nodes, the special effects are basically achieved through canvas.

Canvas benefits: (1) write special effects are very powerful, excellent performance (2) used to play games. As flash will retire in 2020, games now begin to be made with html5. (3) Front-end rendering big data, data visualization, large-screen data display

Canvas process: create a brush through js:

Document * {margin: 0; / * the outer margin is 0, so that canvas can fill the full screen * /} # canvas {background: linear-gradient (135deg, rgb (142132133) 0%, rgb (230132110) 100%) / * create a linear gradient image * /} var cxt=canvas.getContext ('2d'); / / create a brush cxt.beginPath (); / / start to draw cxt.closePath (); / / finish painting cxt.fillStyle='#f2f'; cxt.arc (250, 250, 100); cxt.fill ()

When creating a linear gradient image, if you add "," after 100%, Google will not be able to load it; if you don't, it will be able to load it. But I don't know why.

Pay special attention to the process of canvas in js to create brushes-"start painting -" finish painting-"add color and shape information." The first three steps are all routines, only how to draw different codes according to different tasks.

Web Audio APi process

Document var oCtx=new AudioContext (); / create an audio object var oAudio=document.querySelector ('audio'); var audioSrc=oCtx.createMediaElementSource (oAudio); / create a media source var analyser=oCtx.createAnalyser () for the audio object; / / create an analyzer audioSrc.connect (analyser); / / connect the analyzer to the media source analyser.connect (oCtx.destination) / / connect the results obtained by the analytical machine to the loudspeakers

It should be noted here that autoplay in audio and audio.play () in js have expired (Google browser's security policy: sound cannot be played automatically, it can only be played after the user has an action)

The most critical step is missing from the above process: how to analyze audio data, which varies depending on the task you implement. But the rest of the steps are the same, full of routines.

Development of dynamic Audio Picture

Document * {margin: 0;} # canvas {background:linear-gradient (135deg, rgb (142132133) 0%, rgb (230132110) 100%);}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.