ANYOFFICE-HTML5 (based on H5 development of Android Music app)-Project summary

Project Online Demo Address: http://rose111.applinzi.com/
GitHub Address: Welcome to star Https://github.com/midoxinxin/YueX-Music

 悦心,一款音乐播放器应用。由“女立方”团队开发。眼下。较为流行的音乐播放器有QQ音乐、网易云音乐、多米音乐等。
“悦心”音乐播放器的主要功能，提供音乐数据库，点击列表播放音乐，还可对歌曲进行收藏。加入专属音乐心情功能。

1. During the song playback, the bubbles change dynamically with the music rhythm.
2. Click on the disc. Stop music playback
3. Click the heart icon. Collection is currently playing music.
4. Music playback interface, click on the comment icon. Record the music mood that is currently playing music.

The technical points involved:

1.HTML5 new features: Canvas. Localstorage.
2.webaudio API
3.phoneGap (Pack H5 into Android)

Development record

1. Create an audio environment (CONTEXT1 = new (window). Audiocontext | | Window.webkitaudiocontext) (); )
2. Get audio var audio =document.getelementbyid ("audio");
3. Create the source in the audio environment and send the audio to the audio source
var Source = Context1.createmediaelementsource (audio);
4. Effect point set up an analyzer analyserfa=context1.createanalyser ();
5. Select a target for the audio. Like your system speakers.
6. Connect the source to the effect, as well as the effect and the target (analysis and visualization of eg. Analysernode)

source.connect(analyserfa);analyserfa.connect(context1.destination);

Canvas method Invocation

    canvasFormAudio = document.getElementById(‘canvasFormAudio‘);    ctxfa = canvasFormAudio.getContext("2d");    for ( var i = 0; i < (array.length)/4; i++ ){        ctxfa.beginPath();        var o = Dots[i];        var r = array[i]/256*50;        ctxfa.arc(o.x, o.y, r, 0, Math.PI*2,true);        var g = ctxfa.createRadialGradient(o.x, o.y, 0, o.x, o.y, r);        //并用放射状/圆形渐变进行填充：        g.addColorStop(0,"#fff");        g.addColorStop(1, o.color);        ctxfa.fillStyle = g;        ctxfa.fill();        ctxfa.closePath();    }

My duties: Home canvas, navigation bar. Audio file Analysis flat visual canvas.
Problems encountered: Audio data analysis Webaudio cannot get audio data in Chrome: Chrome browser compatibility issues
Context1 = new (window. Audiocontext | | Window.webkitaudiocontext) ();

 Try{Context1 =New(Window. Audiocontext | |    Window.webkitaudiocontext) (); }Catch(e) {Throw NewError (' The Web Audio API is unavailable '); }//Paint functionfunction Drawspectrumfa () {varWIDTH = Canvasformaudio.width;varHeight= Canvasformaudio.height;varArray =NewUint8array ( -);//Copy the current frequency value into an unsigned arrayAnalyserfa.getbytefrequencydata (array); Ctxfa.clearrect (0,0, WIDTH, HEIGHT);//clearrect (The x-coordinate of the upper-left corner of the rectangle, the y-coordinate of the upper left corner. Clears the width of the rectangle, clears the height of the rectangle)        //loop to generate dots         for(vari =0; I < (array.length)/4; i++) {Ctxfa.beginpath ();varo = Dots[i];varr = array[i]/ the* -; Ctxfa.arc (o.x, O.Y, R,0, math.pi*2,true);varg = Ctxfa.createradialgradient (o.x, O.Y,0, o.x, O.Y, R);//Fill with a radial/circular gradient:G.addcolorstop (0,"#fff"); G.addcolorstop (1, O.color);            Ctxfa.fillstyle = g;            Ctxfa.fill ();        Ctxfa.closepath (); }//Here we have a common array of 128 sets of data, so we were the canvas set at the width of 5*128=640        //Draw on browser frequency or manipulate some non-CSS effectsRequestanimationframe = Window.requestanimationframe | |                                Window.webkitrequestanimationframe | |        Window.mozrequestanimationframe;    Requestanimationframe (DRAWSPECTRUMFA); }//Audio Analysisfunction Audioanalayser () {analyserfa=context1.createanalyser ();//Create an Analyzer        varAudio =jquery ("Audio")[0];//Get sound source from audio tag        varSource = Context1.createmediaelementsource (audio);        Source.connect (ANALYSERFA);        Analyserfa.connect (context1.destination); DRAWSPECTRUMFA ();//Call paint function}/********************************random**********************************/function Random (m,n) {returnMath.Round (Math.random () * (n-m) + M); }/********************************end**********************************//******************* Ball Ball form Adaptive *******************************/function Resize () {height = canvasformaudio.width;        width = canvasformaudio.height;        Ctxfa.height = height;        Ctxfa.width = width;    Getdots ();    } resize (); Window.onresize = resize;/*********************** Adaptive end*****************************/function Getdots () {Dots = []; for(vari =0; i<size; i++) {varx = Random (0, width);vary = random (0, height);varcolor ="Rgba ("+random (0,255)+","+ Random (0,255)+","+random (0,255)+", 0)";        Dots.push ({x:x, y:y, color:color}); }    }

Menu

JQuery (document). Ready ( function($){    //open Navigation Clicking the menu icon$('. Cd-nav-trigger '). On (' click ', function(event){Event.preventdefault (); Togglenav (true); });//close the Navigation$('. Cd-close-nav,. Cd-overlay '). On (' click ', function(event){Event.preventdefault (); Togglenav (false); }); function togglenav(bool) {$('. Cd-nav-container,. Cd-overlay '). Toggleclass (' is-visible ', BOOL); $(' main '). Toggleclass (' Scale-down ', BOOL); }

1. PhoneGap Packing H5

   Steering: http://blog.csdn.net/u014345282/article/details/50997590

ANYOFFICE-HTML5 (based on H5 development of Android Music app)-Project summary