Anyoffice -HTML5大赛 悦心(基于H5开发安卓音乐app)-项目总结

项目在线演示地址:http://rose111.applinzi.com/

github 地址:欢迎star https://github.com/midoxinxin/YueX-Music

 悦心,一款音乐播放器应用。由“女立方”团队开发。眼下。较为流行的音乐播放器有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 < (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();
    }

我的职责:首页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 < (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();
        }
        //这里我们的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<size; 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);
    }
  1. phoneGap 打包H5

    转向:http://blog.csdn.net/u014345282/article/details/50997590

时间: 2024-10-28 07:26:38

Anyoffice -HTML5大赛 悦心(基于H5开发安卓音乐app)-项目总结的相关文章

用h5开发安卓app(第一天)——环境配置

1.首先需要安装java的环境 java的环境配置在网上可以找到很多教程,不再说了. 2.使用esclipse开发的话需要下载,然后安装 esclipse在这个也很简单,下载并安装就可以了. 注意:esclipse有很多版本,对应不同的语言,选择好就可以. 3.下载adt并安装到esclipse中.adt是一个插件,用esclipse开发安卓的插件. 安装过程: 1)启动Eclipse,然后在菜单栏上选择 Help > Install New Software 2)单击 Add 按钮,在右上角

h5开发安卓软键盘遮挡解决方案

//处理input focus时被键盘遮挡问题 inputFocus:function(){ if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", function() { if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA

基于h5的图片无刷新上传(uploadifive)

基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploadifive是一家的,他们都是基于jquery的插件,都支持多文件异步上传,支持显示上传进度,不同的是uploadify基于swfUpload这一开源无刷新上传插件开发,基于flash,而uploadifive则是基于html5,不依赖于flash. 基于他们的不同点,我们可以根据自己的需求来进行选

基于H5的微信支付开发详解

这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可供参考,有的朋友直接看文档就可以自己实现此支付接口的开发了. 一.前言 为何我还写一篇微信支付接口的博文呢?第一,我们必须知道,所谓的工作经验很多都是靠总结出来的,你只有总结了更多知识,积累了更多经验,你才能在该行业中脱颖而出,我个人觉得如今的招聘,很多都需要工作经验(1年.3年.5年....),其

****基于H5的微信支付开发详解[转]

这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可供参考,有的朋友直接看文档就可以自己实现此支付接口的开发了. 一.前言 为何我还写一篇微信支付接口的博文呢?第一,我们必须知道,所谓的工作经验很多都是靠总结出来的,你只有总结了更多知识,积累了更多经验,你才能在该行业中脱颖而出,我个人觉得如今的招聘,很多都需要工作经验(1年.3年.5年....),其

基于webkit开发分享

因项目需要,需要将B/S上项目以桌面版的形式呈现,并实现控制操作系统锁屏功能,为此只有将其以类似于.NET的WebBrowser控件的方式嵌入winForm,但WebBrowser采用IE内核引擎,对HTML5以及CSS3尚不支持,同时受限于操作系统以及版本限制.为此必须转换思路,通过资料查询,主流浏览器很多,其解释引擎自然也不同,兼容性很好的Chrome采用webkit,FireFox采用GECKO,这两款引擎是我了解目前市场上兼容性比较好的解释引擎,虽说对html5支持程度并不全面,但对于项

基于.net开发chrome核心浏览器【二】

原文:基于.net开发chrome核心浏览器[二] 一: 上一篇的链接: 基于.net开发chrome核心浏览器[一] 二: 相关资源介绍: chrome Frame: 让IE有一颗chrome的心,看起来不错,但我没有深入研究这个东西. http://www.google.com/chromeframe?hl=zh-CN&quickenable=true https://developers.google.com/chrome/chrome-frame/ WebKit.Net 已经有一段时间没

H5开发基础之像素、分辨率、DPI、PPI

H5开发基础之像素.分辨率.DPI.PPI  html5 阅读约 4 分钟 ?2016-09-03于坝上草原 背景知识: 目前绝大部分显示器都是基于点阵的,通过一系列的小点排成一个大矩形,通过每个小点显示不同的颜色来形成图像,我们把每个小点称为一个像素 (pixel). 概念点: 1. Dot:物理属性的一个点,打印机或屏幕通过这些点把图片print出来.一块屏幕的Dot的点是固定的.对于一台具体的显示器,多个点(dots)排列起来之后,构成的一个整体的宽度和高度,我们称之为显示器的“物理尺寸

移动端 h5开发相关内容总结——CSS篇

移动端 h5开发相关内容总结——CSS篇 标签: css移动 2016-01-06 15:59 5536人阅读 评论(3) 收藏 举报  分类: HTML+CSS(17)  版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=n