H5,Audio音乐播放器(移动版)

news/2024/11/19 13:28:06/

       有些时候,总是感觉自己进步的没有以前快了。于是就怀疑自己是不是也被时间磨灭了,这可真是一件不幸的事儿。可能是自己会的东西太少了,总是有种莫名的危机感。

       前一段时间,想写一个移动版音乐播放器,于是就开始利用下班后的时间写写。每天大概有大概两个小时的时间来做这件事儿,但是写了一版,感觉逻辑不是理想的,所以就推掉了原来写的,又从新写了一版。最近公司的事儿有点儿多,所以导致播放器被推延了一个星期,对自己很不满意,因为效率还是不在理想状态。

     好了,陈述完毕。开始说说这个小的音乐播放器。

     项目演示地址(请用移动浏览器或者PC移动模拟器访问):http://xxyy.ahthw.com//xiaoyu/musicForMoibleV1.0/index.html

     项目源码:https://github.com/awarriorer/MyMusicPlayForMobile(更新:2017年9月18日)

     手机可以扫描二维码:

      项目实现的功能:

             A:播放器的基础操作,上一首,下一首,播放暂停,时间轴定位,

             B:音乐分类,收藏功能(离线数据存储),

             C:随机背景

             D:同步歌词

     项目中用到的知识:

             A:项目的选择器基于zepto.js

             B:切换基于swiper.js,(自己写了一次,但是有些问题,还希望路过的大神提供给一些学习资料)

             C:audio的操作,请参考audio的API

             D:iconfont图标的应用(第一次用,确实好用)。


项目截图:



http://www.ppmy.cn/news/161769.html

相关文章

微信H5开发(一)

H5开发,一般是指移动端的页面开发。移动端可分为app和普通浏览页面。从嵌入的环境来归类:可以分为app、微信H5及手机浏览器里面打开的页面。 以前粗略的涉略过h5开发的一些知识,感觉H5并不是很难。在这半年内,接手并完成了两个微…

惠威试音碟高品质MP3版

01、雪花飞扬/郭峰 电子合成器 02、试音方程式/女声清唱 03、Shania Fuain/Shania Twain 《诺丁山》的主题曲 04、渡口 蔡琴/流行歌曲 05、达坂城姑娘/八只眼 男声合唱 06、加州旅店/老鹰乐队 07、鼓诗/闫学敏 炎黄第一鼓 08、红灯记/京剧女声 09、张三的歌/蔡琴 流行歌…

微信公众号内嵌的H5页面

前言:之前写微信端购物商城的页面时,使用过flex布局,方便灵活,对手机端兼容性良好,同时可应对复杂的嵌套布局,很是方便。但是,针对两栏式的微信端页面,除了flex布局,还有…

H5与web的区别?

(区分app里面嵌入的h5,或者是web端嵌入的h5,我先说下APP端嵌入的h5和web端相同的),h5和web,从测试流程来讲,它们的主流程是一样的,都是要经过需求分析、评审、案例编写、测试bug跟踪…

微信支付 ——H5支付

先看下微信官方描述的H5支付应用场景: H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。 主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外…

h5微信支付

这篇文章讲了如何h5项目中使用微信支付,包括微信内置浏览器调起支付、外部浏览器调起支付、微信支付方式等内容。 一:问题梳理 1:如何判断是否是微信内置浏览器? 2:如果是外部浏览器调起支付该如何实现?…

哔哩哔哩视频云画质与窄带高清AI落地实践

视频赛道卷到下半场,一定会面临体验与成本的对抗,尤其是在行业大环境“过冬”的背景下,想要在有限带宽下获得最佳的画质观感变得异常具备挑战性。从视频云业务场景的视角来看,如何有效解决cross-domain问题、如何突破低业务延迟下…

大手笔!吴恩达一口气开放了 3 个 AIGC 教程。。

公众号关注 “GitHubDaily” 设为 “星标”,每天带你逛 GitHub! 一个月前,DeepLearning.ai 创始人吴恩达与 OpenAI 开发者 Iza Fulford 联手推出了一门面向开发者的技术教程:《ChatGPT 提示工程》。 该教程总共分为 9 个章节&…