本文探讨了HTML5 audio标签在实现音乐播放器中的应用，包括播放、暂停、切换歌曲、进度控制等核心功能。同时提到了在iPhone上autoplay的限制，以及使用数组处理音乐列表和loop属性的技巧。还介绍了进度条实现和preloadjs库解决mp3加载问题，以及针对音乐时长获取的解决方案。文章最后布置了实现网易云音乐播放器相关功能的作业。
H5增加了很多的标签，面试的时候，如果面试官问你H5都有哪些新标签，你回答header、footer、nav。
这么回答几乎是无效的，因为这些标签在H5里面的角色，相当于鸡骨头、鱼刺、蘑菇腿——全是鸡肋，至少你得答出来audio、video、canvas，这些才是H5的核心功能，本文我们就重点说一下audio。
audio广泛的应用于各种项目中，游戏背景、各种播放器，可以说有声音的地方就有audio，当然因为各种限制和坑，很容易让前端人员陷入尴尬，比如在iphone下audio 是不允许autoplay的，如果前端人员不知道这个坑，产品经理又拿微信做对比，那这个锅前端就背定了。
所以本文通过对audio的核心知识的讲解，让小伙伴们一来不背锅，二来不加班。
第一步非常简单你就把audio当成图片使用，搞出个src,剩下ul是歌曲列表，然后是一堆功能按钮，不再赘述。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>网易云音乐</title> </head> <body> <audio src="mp3/千千阙歌.mp3" id="audio" controls></audio> <h3>点击开始播放</h3> <ul> <li> <a href="javascript:;">千千阙歌</a> </li> <li> <a href="javascript:;">时间都去哪儿了</a> </li> <l
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
