悅心,一款音樂播放器應(yīng)用。由“女立方”團(tuán)隊開發(fā)。眼下。較為流行的音樂播放器有QQ音樂、網(wǎng)易云音樂、多米音樂等。

“悅心”音樂播放器的主要功能，提供音樂數(shù)據(jù)庫，點(diǎn)擊列表播放音樂，還可對歌曲進(jìn)行收藏。加入專屬音樂心情功能。

1.歌曲播放過程中，氣泡隨音樂節(jié)奏動態(tài)變化。

2.點(diǎn)擊圓盤。停止音樂播放

3.點(diǎn)擊心形圖標(biāo)。收藏當(dāng)前播放音樂。

4.音樂播放界面，點(diǎn)擊評論圖標(biāo)。記錄對當(dāng)前播放音樂的專屬音樂心情。

涉及到的技術(shù)點(diǎn)：

1.html5新特性：canvas。localstorage.

2.webaudio api

3.phoneGap(將H5打包成android)

開發(fā)記錄

1.創(chuàng)建音頻環(huán)境(context1 = new (window.AudioContext || window.webkitAudioContext)(); )

2.獲取audio var audio =document.getElementById(“audio”);

3.在音頻環(huán)境里創(chuàng)建源 并將音頻發(fā)到音頻源

var source = context1.createMediaElementSource(audio);

4.效果點(diǎn) 建立一個分析器analyserfa=context1.createAnalyser();

5.為音頻選擇一個目地。比如你的系統(tǒng)揚(yáng)聲器

6.連接源到效果器，以及效果器和目地(分析和可視化eg. AnalyserNode)

source.connect(analyserfa);

analyserfa.connect(context1.destination);

canvas方法調(diào)用

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);

//并用放射狀/圓形漸變進(jìn)行填充：

g.addColorStop(0,"#fff");

g.addColorStop(1, o.color);

ctxfa.fillStyle = g;

ctxfa.fill();

ctxfa.closePath();

}

我的職責(zé)：首頁canvas,導(dǎo)航條。音頻文件分析平可視化canvas。

遇到的問題：音頻數(shù)據(jù)分析 webaudio無法在chrome瀏覽器獲取音頻數(shù)據(jù)： chrome瀏覽器兼容問題

context1 = new (window.AudioContext || window.webkitAudioContext)();

try {

context1 = new (window.AudioContext || window.webkitAudioContext)();

} catch(e) {

throw new Error('The Web Audio API is unavailable');

}

//畫圖函數(shù)

function drawSpectrumfa() {

var WIDTH = canvasFormAudio.width;

var HEIGHT= canvasFormAudio.height;

var array = new Uint8Array(128); //復(fù)制當(dāng)前的頻率值到一個無符號數(shù)組中

analyserfa.getByteFrequencyData(array);

ctxfa.clearRect(0, 0, WIDTH, HEIGHT);//clearRect(矩形左上角x坐標(biāo)，矩形左上角y坐標(biāo)。清除矩形的寬，清除矩形的高)

//循環(huán)生成圓點(diǎn)

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);

//并用放射狀/圓形漸變進(jìn)行填充：

g.addColorStop(0,"#fff");

g.addColorStop(1, o.color);

ctxfa.fillStyle = g;

ctxfa.fill();

ctxfa.closePath();

}

//這里我們的array一共同擁有128組數(shù)據(jù)，所以我們當(dāng)時canvas設(shè)置的寬度為5*128=640

//依據(jù)瀏覽器頻率畫圖或者操作一些非css效果

requestAnimationFrame = window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame;

requestAnimationFrame(drawSpectrumfa);

}

//音頻分析

function audioAnalayser(){

analyserfa=context1.createAnalyser();//建立一個分析器

var audio =jQuery("audio")[0];// 從audio標(biāo)簽獲取聲音源 source

var source = context1.createMediaElementSource(audio);

source.connect(analyserfa);

analyserfa.connect(context1.destination);

drawSpectrumfa();//調(diào)用畫圖函數(shù)

}

/********************************random**********************************/

function random(m,n){

return Math.round(Math.random()*(n-m) + m);

}

/********************************END**********************************/

/*******************球球窗體自適應(yīng)*******************************/

function resize(){

height = canvasFormAudio.width;

width = canvasFormAudio.height;

ctxfa.height = height;

ctxfa.width = width;

getDots();

}

resize();

window.onresize = resize;

/*********************** 自適應(yīng)END*****************************/

function getDots(){

Dots = [];

for(var i =0; i

var x = random(0,width);

var y = random(0,height);

var color = "rgba("+random(0,255)+"," + random(0,255)+","+random(0,255)+",0)";

Dots.push({

x: x,

y: y,

color: color

});

}

}

菜單

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);

}

總結(jié)

以上是生活随笔為你收集整理的html5app大赛,Anyoffice -HTML5大赛 悦心（基于H5开发安卓音乐app）-项目总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。