Amplitude 开源前端web音频播放器实例

Amplitude是一款开源的web前端音频播放器,我写了一个例子来展示它的使用。
下载源码,可以访问我的github https://github.com/narycc/amplitude_demo/tree/master

你只需要下载下来在本地执行就可以了。
如想查看线上的实际演示,可以访问http://yarmyarch.com/music 查看。

如果想快速的为自己的创作的专辑做一个酷炫的展示页面,使用这个插件再好不过了。
在我的实例中,我自己没有写一行javascript 代码就依靠插件实现了所有的播放,暂停,上一首,下一首等播放控制。

你也可以在我的项目上改吧改吧,替换下资源和图片就能生成自己的专辑web页面了,怎么样,要不要试试?
demo

走吧

走吧,
歌声伴着你追寻
这条全新的路

走吧,
月光照着你升起
这条银色的路

走吧,
眼睛望着那一片天空
心敲击着海浪的鼓

走吧,
我们不会失去记忆
我们一齐成长在生命的湖

走吧,
路啊路
开满加州罂粟

(加州罂粟花语:希望)

前端工作环境必备

每一次电脑都坏的不可思议,这一次竟然是因为没有关机,突然停电,一大早按了一个开机键就蓝屏开不了机,然后就是重装系统,还好磁盘没有坏。系统装好了就要装工作环境,列一下我的工作环境以免下次再来一次。
1,搜狗输入法;
2,谷歌浏览器;
3, sublime text 编辑器;
4,有道笔记;(需要账号什么的都记录在这里)
5, 安装git + mercurial( sourcetree 依赖的软件) + sourcetree;
6,grunt安装 (依次安装node.js前往nodes官网下载然后安装 -> npm(包管理工具,用来方便安装grunt) – > npm install grunt -cli -gf) 如果安装不成功可能是权限的问题,sudo nam install -g grunt-cli进行安装。

7,compass 安装(依赖安装rubyinstaller for windows -> 安装sass gem install sass -> 安装compass gem install compass) compass 的安装可能依靠淘宝镜像。
8,secureCRT
9, PS
10, Fiddler
11, Chrome 插件window resizer
12, sftp
在安装了compass之后,执行compass watch 的时候报错: can’t load such file – animation, 是因为海外的compass 中依赖了animation 第三方包,需要执行下面的安装之后才可以
gem install animation –pre

其他的用到了再说吧。

windows向Mac 迁移的初体验

由于操作失误,不小心把整个笔记都删掉了,笨死了;

mac 的软件安装: 在百度中下载好了bmg 格式的安装文件之后,把安装文件用鼠标拖到右边的应用文件夹中就可以了,
在安装之前要到设置中找到 -》 security & privacy, 点击 click to change… 选择anywhere

快捷键大全: 前期需要熟悉使用mac 来提高工作效率,option + 空格切换输入法,ctrl + 空格搜索查找
command + c 查找, command + v 黏贴; option+command+声音控制键来控制声音大小;

访问ftp: 在左上角找到Go-》connect to sever; 然后输入smb://172.21.107.202

安装ps cc 需要破解包, 按照教程http://www.nowmac.com/soft/design/graphic/Photoshop-CC.html来操作但是到了第五步在cc 程序右键的时候走不下去,我弄了很久以为是教程有问题,于是第二天找张轩帮忙看,结果发现是鼠标的右键功能都没有开启,笑掉大牙了。到设置-》mouse -> point&click tab 点击secondary click

把U盘上的东西拷贝到mac 上面来.
安装sublime text3 成功,但是插件需要依赖ruby, npm 等;安装sublime 插件竟然由于不能被墙的原因失败了好多次,最后把vpn 给配置上了之后才顺利了。真吭。
我是刚开始用mac啊,看到上面的ruby了吧,没错啦,mac osx是自带ruby环境的,还自带python呢,很爽啊。

homebrew是oxs 的包管理工具。到home brew 官网上搜索安装方法。http://brew.sh
安装完成之后执行brew doctor,检查home-brew 各模块是否正常;brew install git 安装git库。

OK 开始学习mac ternimal 的使用:Andy 推荐使用iterm2 terminal 工具。

compass, sass 都安装成功了,由于compass 放在amazon s3 上面,需要翻墙,所以使用了淘宝的镜像:
$ gem sources –remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
执行上面命令之后可以执行: (sudo) gem install compass, gem install sass

mac ip 地址查询, 右上角的网络,选择open network preference , 然后就可以查看自身的ip 地址;
查看mac 的mac 地址,在terminal 中输入ifconfig;

terminal 退出python 编辑,使用exit() 或者ctrl + d 退出;

git 安装之后使用命令ssh-keygen -t rss -C zhongpingping@oneplus.cn[邮箱名] 执行之后,打开vim /User/pp/.ssh/.id_rsa.pub, 将其拷贝到gitlab和bitbucket 的账户ssh key 中去。然后就可以使用git clone 下载项目了;
在/User/pp 下面创建一个projects目录,然后可以放到侧边栏来,设置方法:右上角Finder -> preference -> 选中sidebar 勾选home图标的那个选项,然后就能在finder 里面找到pp 的快捷按钮了,然后打开pp 目录, 把pp 目录中的project 右键选中make alias创建别名,再把它拖到桌面上就可以直接进入项目了目录了。

要让refurbish 项目运行起来,还必须安装bower, npm install bower -g; 然后bower install 将bower.json中得依赖全部安装起来。

使用mac 自带的mail 客户端,点击悬着other provider, 然后配置邮箱账号和密码:
imap.qiye.163.com:993
smtp.qiye.163.com:994

Fiddler 没有mac 版本,mac 的抓包工具是charles,

我的Mac appleId : shenghuobu0907@126.com Zpp890907

command tab 切换当前应用,command n 新开一个terminal 终端窗口;

快捷键:shift + g 到文尾, gg 到文首, shift + 4($)到行尾, shift+6(^)到行首。

给ps 安装Lato 字体: 获得字体库之后,打开spotlight search 之后输入font, 然后点击左上角的加号,就可以把字体引入进来。

我很困扰的是mac 上面的翻译,我习惯了使用有道的在线翻译,突然间使用mac自带的翻译软件感觉不够用,主要是缺少中英和英中的互译。
1,安装dictunifer, 它负责将StarDict词库转换成Mac词典
2, 下载starDict 词库
3, 将下载好的词库拖到dictunifer 中转换

mac 连接远程服务器,可以直接使用ssh , 比如连接到我的自己的服务器,可以使用ssh zpp@xx.xx.xx.xx 可以不用使用xshell 或者secureCRT等这些客户端。
上传本地文件到远程服务器: scp /home/lnmp0.4.tar.gz root@www.vpser.net:/root/lnmp0.4.tar.gz
du -sh prestashop 查看文件夹的总体积,也可以使用 du -sm * | sort -n 查看当前文件夹下面所有子文件夹的子文件数;

display flex 的兼容性写法

拖勇哥的福,知道了为什么我的手机上显示flex 有问题,原来是只写了新的flex 写法,在此记录下兼容性的写法:

 

.flex{
display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD – Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER – IE 10 */
display: -webkit-flex; /* NEW – Chrome */
display: flex;
flex-flow: row;
.box1{
-webkit-box-flex: 3; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-flex: 3; /* OLD – Firefox 19- */
width: 30%; /* For old syntax, otherwise collapses. */
-webkit-flex: 3; /* Chrome */
-ms-flex: 3; /* IE 10 */
flex: 3; /* NEW, Spec – Opera 12.1, Firefox 20+ */
text-align: center;
}
.box2{
-webkit-box-flex: 7; /* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-flex: 7; /* OLD – Firefox 19- */
width: 70%; /* For old syntax, otherwise collapses. */
-webkit-flex: 7; /* Chrome */
-ms-flex: 7; /* IE 10 */
flex: 7; /* NEW, Spec – Opera 12.1, Firefox 20+ */
padding-left: 1rem;
}
}

托俏云的福,引入了sass ,元素层级关系看的很清楚。

字体文件跨域支持

低端手机浏览器对跨域的限制不是很严格,升级为高级浏览器之后的icon 文件就看不到了,原因是应用的域名是mmall.test1.oneplus.cn 而icon 的资源文件是放在我的域名下面,zpp.mobile.devel.oneplus.cn 下面,将来上线也将是,应用域名(m.oneplus.cn)不同于静态资源域名(statics.oneplus.cn) 所以需要开启静态资源服务nginx 的跨域配置限制,配置如下:

 

 location ~* \.(eot|svg|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

 

使用PC上的fiddler 抓手机上的包–移动端必备技能

背景:Uber 春节送你回家的某一天晚上,彦余解决一个bug 的时候需要抓包看下,但是我不会,彦余就现学现卖成功抓取了,对前端来说确实是必备技能啊;
技术指导:李彦余
条件:电脑和手机wifi 必须在同一个局域网下面,比如我的手机必须设置oneplus staff 热点;
方法:
1,下载fiddler;
2,打开Fiddler 的tools 下面的Filddler options, 选中Connections 面板
QQ图片20150228143747

勾选 Allow remote computers to connect 选项,表示允许远程电脑链接的意思,意思就是允许其他设备把http 请求发送到这个fiddler 上面来;
当然你也有可能想要获取https 请求包,那么就像下面这样勾选 capture https connects 和 decrypt https traffic 和 Ignore server certification errors 选项,具体含义翻译一下就知道了;
QQ图片20150228143755
3, 做完上面的设置之后,重启fiddler , 这一步必需执行,要不然你就等着等我一样,嗯?怎么回事?然后发愣吧、

4, 设置手机端
先使用手机浏览器,登录你的pc ip + 端口号8888, 比如我的: 172.21.104.100:8888 , 然后他会提示如下:

QQ图片20150228145034
然后点击, 最下面的蓝色文字,FildderRoot certificate ,点击之后会进行一个安全证书的安装,安装完之后执行下面的步骤;

5,打开手机的设置, 找到wifi 热点,长按跟电脑所在局域网相同的选项,选中编辑网络,或者跟我一样点击oneplus staff 后面的向右箭头,
QQ图片20150228143638
点击之后,找到 手动代理,设置主机名为你的PC 的ip 地址,比如我的是172.21.104.100; 代理服务器端口是: 8888;
ok 这样你就可以在手机上访问m.oneplus.cn 然后在pc上抓包了,微信也是可以的哦。。。

如果不行,那么请重新按照上面的步骤再试几次,我这里就是遇到了,oneplus staff 上面改了手动代理之后,staff 老是掉的问题,多试了几次之后就好了,祝你成功。

新公司的360度态度转变

今天不知道是心情好还是天气好,对新公司的态度和昨天比起来竟然是180度大逆转。
9点之前就打电话给司机确认了停车地点,并且叮嘱司机车到了公司门口的时候给我call,所以9点20的时候坐上了前往东莞的车。在去东莞之前这辆丰田中巴还前往了其他地方接人,这时候我才知道原来公司在深圳有这么多分部, 让我很是吃惊。在车上看到了公司的杂志上面刊登了一些优秀的员工和产品设计,感觉公司还是个人才济济的地方,不容小觑,值得尊重。
车上有一个保安,在公司做了三年了,从东莞到深圳来,公司包住,每天还有70-100 的出差补贴,真是不错啊,保安做到这个份上,公司明显很大方嘛;然后在司机的眼里,对公司也是交口称赞的。回来的时候,开车送我回来的司机开得那辆车超级豪华,不过忘记了看牌子。
到了工厂之后,hr也比我想象中的要热情很多,也相对来说比较人性化,还帮一个没有复印件的女孩亲自去复印,中午还带我们去吃饭。工厂内部有四个食堂,各种各样的食物,米饭,面粉还有烧烤,真是个小食街啊,菜也不算贵,肉菜4块。工厂内还有各种设施,包括足球场,台球,乒乓球,篮球,还有一个小朋友的游乐场,看到有老人在里面带小孩,估计是职工亲属吧。住房也是超豪华的,房间很大,还有电视卫生间热水器,有足够大的阳台,还有空调哇。
下午四点回到了深圳办公区,第一次接触公司ftp,不小心看到了公司的文档,真是做得很好,虽然是刚成立的公司,可是规范清晰,有据可循,而且项目管理是最新的理论,软件工具用的是最新的工具,代码管理也弃用了之前一直熟悉的svn ,改成了git. 说实话,git 头一次用,遇到了很尴尬的问题,不会安装,不会pull,可是这种学习新东西的感觉还是蛮好的。
总之,今天突然间对公司的态度是大好,下班之后和一同回家的法国同事说英语,更让人觉得这个公司前途一片光明。哈哈,祝我好运吧。

糟糕的入职体验

希望把这两天糟糕的入职体验写下来之后心情会好起来。
2.18日离开了上一家服务的公司,约好了19号入职新的公司,因为怕新的公司出现任何不好的情况我一天都没休息。收到新公司的hr 发的短信,说早上10点之前赶到车公庙的工作地点。
2月19日我8点钟出发,因为之前查过百度地图从深圳大学城站到车公庙站最短的地铁时间都是1个小时10分钟,那么将从家里到地铁站的10分钟,从车公庙到新工位的时间15分钟考虑在内,差不多就是1小时40分钟了,所以提前两个小时出发给自己预留20分钟的缓冲时间那相对来说是比较合理的。8:30到了深圳北站,刚开始看到了很多人在排队,那个时候我心里就犯嘀咕,怎么这么多人,跟着排队,排了十几二十分钟,听到广播说由于少年宫地铁站出现了地铁故障,赶时间的乘客改乘其他交通方式,我还心存侥幸的觉得应该马上就好了,而且地铁不会堵车,应该还能赶上,但是当我身后排队的人越来越多,而前面没有动弹的时候我开始动摇了,怎么办??我开始看到有人离开队伍,改乘了。于是我决定我也要坐出租车去了,这样才能赶在10点之前到达车公庙的办公处啊。而且我不知道泰然大厦的具体位置,找到泰然大厦想必也要一段时间吧。在等红的的时候看到前面好多人啊,而红的进来的数量比较少,而且慢,于是我走上前去问有人往车公庙方向吗?这样可以和别人可以拼车,而且可以提前点出发,在这倒霉的一天里这是我运气最好的一刻。当我们到了泰然8路的时候到了8:48, 然后死机把我放下来说他也不知道泰然大厦在那里,在询问两人之后迅速找到了。赶到大厦的时候刚好10点整,我感叹了下自己英明的决定,要是自己再犹豫一刻我就要迟到了。
上午行政助理给我拿来电脑和办公椅,带着我一一认识了电商部门的所有同事,当然我没有记下所有人的名字,只是记得那么几个。然后我也没有人来告诉我要干什么,于是我的一整天都是在公司网上逛这逛那,找了会儿房子,因为考虑到家里离公司很远,所以。。。但是今天我突然觉得我不应该那么冲动的把房子搬了,因为我试用期都还没有过,鬼知道我是不是真的能过试用期呢?还是等试用期过了再搬吧,远的话就比以前早一个小时起床了,或许还能减肥呢。
新公司要求6月份之前是12*6工作制,一周6天,每天12小时,9点半下班; 昨天回到家里已经11:20了,并且hr 让我第二天2月20日9点到公司楼下等车去东莞长安总公司报道。竟然感觉有点委屈,觉得自己好孤单,好无助。
2月20日7点钟的闹钟响了之后我以最快的速度洗漱完了之后,做了又一个英明的决定,先坐公交到世界之窗,然后坐罗宝线到车公庙,最后经过现实的验证,这个时间是比坐地铁要快那么10-20分钟;更庆幸的是,龙华线的信号故障问题还没彻底解决。我8:35就到公司楼下了;考虑到只有25分钟,并且在楼上看不到车是否来了,于是我就冒着寒风在约定好的地点等车,8:58的时候我打电话给hr问车还没来是怎么回事,他说车子一般要到九点多点到;于是我安心的等啊,但是等到9:15的时候还是没有见到他所描述的淡黄色,丰田,粤B,中巴车。于是我发了短信,没回。之后看到几个同事陆陆续续到公司了,我还问是不是在这里等车去东莞报道啊,同事说没错,就是这里。可是我等到9:50之前给hr 打了两个电话都没人接听,最后9:50 他打回来,告知我车早就走了。顿时我有种快奔溃的感觉,一时好想就这么走了算了,不要什么再坚持下去了。2.19日7点的时候吃了一份那可怜的只有辣椒,连米饭都很少的快餐到现在至今还米粒未尽,而且站在寒风中等了一个多小时,临海的风真的很大,吹的我头疼。我感觉很委屈,hr 叫我回办公室去的时候,我说我什么账号和权限都还没有,而且工作还没有分配,我在那里很无聊,所以我最后回来了。
在回来之前我觉得我需要到处走走,驱散下心中的委屈和抱怨,于是我打算到昨天查的下沙这个地方去看看,如果以后正式入职了估计我就会到这个地方来住吧。下沙这个地方的房子比平山村的房子挨的更紧,让我有种强烈的压迫感。于是我匆匆返回来,本打算去吃肯德基炸鸡腿鸡翅,但是看到那么小,肯定填不饱我空虚的胃,还是点了份饭和豆浆。吃完之后和小罗聊了几句之后,开始迈着沉重的脚步冒着寒冷的风朝着地铁口走了。
一路上我在挣扎着,这种无依无靠,这种感觉无奈的挫折,让我心里非常的想马上找一个男朋友,抱着狠狠的咬一口,哭一下。
路上,我在犹豫我要不要就这么一走了之,要不要重新去找一个工作,要不要出去旅游,要不要就这么放弃;这么多消极的后路之后,会不会公司把今天的事情也当作是对我的考评? 会不会公司的人已经招满了,就想让我知难而退呢?
反正最后,我明天依然会早起,依然会9点之前赶到公司楼下,不过这次我会在9点之前一直打司机的电话,直到他出现,直到顺利完成入职,直到试用期结束。既然我找到了这样的公司,不管现在的情况有多么糟糕我都要打掉牙往肚子里吞。住处我也暂时不会考虑搬了,虽然远了点,但是我对我现在的住处很满意,很喜欢我现在住的地方。至少晚上能睡个安稳觉。而且,说不定还能减肥,车公庙的那些妹子除了比我白,比我高,再就是腿比我细,除此之外,我没发现他们哪里能胜过我。