从零开始实现网易云音乐播放器(3)

最新推荐文章于 2025-05-11 10:09:22 发布

忠彬老师

最新推荐文章于 2025-05-11 10:09:22 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mianbaolixiang/article/details/90515139

本文探讨了HTML5 audio标签在实现音乐播放器中的应用，包括播放、暂停、切换歌曲、进度控制等核心功能。同时提到了在iPhone上autoplay的限制，以及使用数组处理音乐列表和loop属性的技巧。还介绍了进度条实现和preloadjs库解决mp3加载问题，以及针对音乐时长获取的解决方案。文章最后布置了实现网易云音乐播放器相关功能的作业。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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