微信小程序中实现——【音乐播放器】

文章目录

• 一、学习目标
• • • 1、掌握swiper组件、scroll-view组件的使用
    • 2、掌握image组件的使用
    • 3、掌握音频API的使用
    • 4、掌握slider组件的使用
    • 二、开发前的准备
    • • • 1、页面结构图
        • 2、项目初始化
        • 3、 任务分析
        • 4、 前导知识
        • 三、标签页切换
        • • • 1、页面和样式：
            • 2、音乐小程序基础页面和样式：
            • 3、页面和样式tab导航的样式：
            • 4、测试页面info.wxml、page.wxml、play.wxml文件：
            • 5、通过滚动时间切换页面效果
            • • （一）滚动事件
              • （二）通过滚动事件切换页面效果：
              • 四、音乐推荐
              • • • • 1、scroll-view组件的属性及说明：
                    • 2、image组件缩放模式和裁剪模式测试：
                    • • （一）scroll-view组件：
                      • 3、swiper组件实现轮播图：
                      • 4、flex布局实现功能按钮：
                      • • （一）flex布局实现功能按钮：
                        • （二）flex布局实现页面布局：
                        • 5、index页面底部播放
                        • 五、播放器
                        • • • 1、audioctx对象声明的方式：
                            • • （一）innerAudioContext案例使用：
                              • （二）slider组件的使用：
                              • （三）音乐播放列表和音乐状态数据：
                              • （四）实现音乐播放功能
                              • （五）底部播放器的结构代码：
                              • （六）底部播放器暂停/播放按钮控制歌曲：
                              • (七）实现播放器切换下一曲歌曲：
                              • （八）播放器页面结构代码：
                              • 六、播放器
                              • • 1、播放器样式1
                                • 2、通过CSS3动画实现海报的旋转功能：
                                • 3、播放器页面下方的滑块结构：
                                • 3、显示音乐的播放进度：
                                • 4、控制进度条的长度控制歌曲播放进度：
                                • 七、播放列表
                                • • 1、控制进度条的长度控制歌曲播放进度：
                                  • 2、实现换曲功能：

                                    一、学习目标

                                    1、掌握swiper组件、scroll-view组件的使用

                                    2、掌握image组件的使用

                                    3、掌握音频API的使用

                                    4、掌握slider组件的使用

                                    二、开发前的准备

                                    音乐小程序项目效果展示：

                                    

                                    1、页面结构图

                                    tab导航栏

                                    content内容区

                                    player音乐播放控件

                                    

                                    2、项目初始化

                                    开发者工具创建空白项目：

                                    {"pages:["pages/index/index"
                                    ]
                                    }
                                    

                                    “navigationBarBackgroudColor”:"#fff,

                                    “navigationBartitletext”:“音乐,”

                                    “navigationBarBackgroudColor”:“black”,

                                    

                                    3、 任务分析

                                    标签页和页面info.wxml、play.wxml、palylist.wxml

                                    4、 前导知识

                                    swiper组件编写滑动页面结构

                                    0
                                    1
                                    2
                                    
                                    

                                    swiper组件编写滑动页面结构index.wxml:

                                       
                                     
                                    body
                                    
                                    

                                    

                                    三、标签页切换

                                    1、页面和样式：