内嵌音乐播放器

讲解一个基本的播放器,包含基本的功能实现。

播放器制作的成品。代码直接在后面拿,注意歌曲对象的格式。 

内嵌音乐播放器_第1张图片

内嵌音乐播放器_第2张图片

1.分析基本结构

内嵌音乐播放器_第3张图片

我们可以发现这个界面的基本结构可以分为两个部分,一个部分是歌曲的top 一个部分是歌曲的bottom

这边直接使用flex布局进行,划分,上二下一 对上面的内容继续进行划分。使用flex布局完成之后的划分

页面布局

页面的基本布局代码

我直接放到后面的完整代码里面了,这样我好写文字。

基本布局结束之后,我们这时候需要书写一下播放的基本逻辑,这个文本编辑器字数一高直接就卡的受不了。

播放逻辑

我们需要保证,当播放到对应的音乐时,歌词和歌曲背景,歌曲名称,播放的链接都需要进行更改,那么现在我们需要先获取到这些页面元素,获取之后,我们直接进行讲相同功能的模块进行封装,封装之后直接拿给对应逻辑的监听调用即可。

1.播放和暂停

        注意切换界面的显示和当前播放的音乐对象的内容

2.上一曲和下一曲

        注意播放到第一首和最后一首的播放情况

        注意当歌曲没有播放的时候,点击下一首或者上一首的时候,保证歌曲的顺利播放

3.自动播放

        设置一个函数来监听歌曲的完成,当歌曲完成时,自动切换到下一曲。

4.设置记录上一次

        我们直接使用本地储存的知识点来进行上一次内容的记录,直接记录下来播放的索引即可。

5.播放进度条的显示

        根据歌曲的播放进度进行进度条的显示内容

注意这部分内容的切换就行。我感觉可能没人会看这个内容。

完整代码:




    
    Title
    


歌曲-[歌手]

你可能感兴趣的:(前端,CSS,JavaScript,css3,前端)