html5app大赛,Anyoffice -HTML5大赛 悦心（基于H5开发安卓音乐app）-项目总结

悦心,一款音乐播放器应用。由“女立方”团队开发。眼下。较为流行的音乐播放器有QQ音乐、 易云音乐、多米音乐等。

“悦心”音乐播放器的主要功能，提供音乐数据库，点击列表播放音乐，还可对歌曲进行收藏。加入专属音乐心情功能。

1.歌曲播放过程中，气泡随音乐节奏动态变化。

2.点击圆盘。停止音乐播放

3.点击心形图标。收藏当前播放音乐。

4.音乐播放界面，点击评论图标。记录对当前播放音乐的专属音乐心情。

涉及到的技术点：

1.html5新特性：canvas。localstorage.

2.webaudio api

3.phoneGap(将H5打包成android)

开发记录

1.创建音频环境(context1 = new (window.AudioContext || window.webkitAudioContext)(); )

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

3.在音频环境里创建源 并将音频发到音频源

var source = context1.createMediaElementSource(audio);

4.效果点 建立一个分析器analyserfa=context1.createAnalyser();

5.为音频选择一个目地。比如你的系统扬声器

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

source.connect(analyserfa);

analyserfa.connect(context1.destination);

canvas方法调用

canvasFormAudio = document.getElementById(‘canvasFormAudio’);

ctxfa = canvasFormAudio.getContext(“2d”);

for ( var i = 0; 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();

}

我的职责：首页canvas,导航条。音频文件分析平可视化canvas。

遇到的问题：音频数据分析 webaudio无法在chrome浏览器获取音频数据： 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’);

}

//画图函数

function drawSpectrumfa() {

var WIDTH = canvasFormAudio.width;

var HEIGHT= canvasFormAudio.height;

var array = new Uint8Array(128); //复制当前的频率值到一个无符 数组中

analyserfa.getByteFrequencyData(array);

ctxfa.clearRect(0, 0, WIDTH, HEIGHT);//clearRect(矩形左上角x坐标，矩形左上角y坐标。清除矩形的宽，清除矩形的高)

//循环生成圆点

for ( var i = 0; 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();

}

//这里我们的array一共同拥有128组数据，所以我们当时canvas设置的宽度为5*128=640

//依据浏览器频率画图或者操作一些非css效果

requestAnimationFrame = window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame;

requestAnimationFrame(drawSpectrumfa);

}

//音频分析

function audioAnalayser(){

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

var audio =jQuery(“audio”)[0];// 从audio标签获取声音源 source

var source = context1.createMediaElementSource(audio);

source.connect(analyserfa);

analyserfa.connect(context1.destination);

drawSpectrumfa();//调用画图函数

}

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

function random(m,n){

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

}

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

/*******************球球窗体自适应*******************************/

function resize(){

height = canvasFormAudio.width;

width = canvasFormAudio.height;

ctxfa.height = height;

ctxfa.width = width;

getDots();

}

resize();

window.onresize = resize;

/*********************** 自适应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);

}

相关资源：悦客服,首家可订制的在线客服系统软件-C#工具类资源-CSDN文库