当前位置: 首页 > news >正文

网易云音乐开发--音乐播放暂停切换上下首功能实现

音乐播放暂停功能实现

封装一个控制音乐播放/暂停的功能函数

看一下文档,我需要用的api 

 这个接口好像没有音频的url,查看一下,换个api

 

 这样就能拿到id,并可以播放了 

 

 但是音乐并没有播放

 我们少了这个

 现在可以播放了,如果有上面的需要,可以参考一下

 "requiredBackgroundModes": ["audio", "location"]

 完善代码,暂停音乐

 解决系统任务栏控制音乐播放状态显示不一致问题

问题:如果用户操作系统的控制音乐播放/暂停的按钮,页面不知道,导致页面显示是否播放的状态和真实播放状态不一致

解决方案:

通过控股音频的实例backgroundAudioManager 去监听音乐播放/暂停

 我们需要写俩个的回调

 我们将backgroundAudioManager提升了一下,并挂载到this上。这样页面都能用它 

这样就写完了三个监视,但是代码的重复率太高了。所以我们要封装一个修改播放状态的功能函数

getApp解决页面销毁音乐播放状态问题

刚刚解决了系统任务栏控制音乐播放状态显示不一致问题

 就是把数据存储在app.js这个全局中,这样不会随页面的销毁,数据也销毁了

 在全局初始化这俩个参数

 直接拿来用

 判断当前页面音乐是否在播放 

 页面通信需求分析,npm包使用准备工作

通过点击这个,绑定事件。实现上下首的切换

 注意的是我们还要传入一个id,来分辨是上一首还是下一首

 现在我们知道了切哥的类型,但是只在详情页。我们需要这个传递到recommend页面才能实现上下首的切换。其实就是把recommend页面的id传进入就可以了。这里我们需要使用npm包

初始化package.json

微信小程序使用npm init 这个是问你选择的包名是啥?不能以英文开头 

然后一直回车就可以了

 然后就有包的说明书了 

勾选运行使用npm

2022-3-8 现在这个按钮官方改为 将JS编译为es5,把这个勾上就行

mroderick/PubSubJS: Dependency free publish/subscribe for JavaScript (github.com)

 在这里我们需要补充一下定义事件的相关内容

1.分类

        1.标准DOM事件

        2.自定义事件

2.标准DOM事件

        1.举例:click,input

        2.事件名固定的,事件由浏览器触发

3.自定义事件

        1.绑定事件

                1.事件名

                2.事件的回调        

                (我们使用的pubsub.js的订阅方)

                3.订阅方式为接收数据一方

        2.触发事件

                1.事件名

                2.提供事件参数对象,等同于原生事件的event对象 

                (我们使用的pubsub.js的发布方:PubSub.publish())

                3.发布方为提供数据一方

因为songDeatil需要把类型发送给recommendSong,因此songDeatil是发布方,recommendSong是订阅方

页面先去引用它

 但是我们报错了。说的是路径的错误。这是因为,我们没有构建包名

1.开发工具--》工具--》构建npm

2.会将node_modules中的包名打包到miniprogram_npm中

页面通信完整实现

先订阅,后发布

打印出发布回来的俩个数据,第一个是事件的名称,第二个就是传递回来的数据

 如何传上一首和下一首。我们这里可以使用data

 把下标传进入

 为什么,我们要传入下标呢?这是因为这样,可以操作上一首和下一首

 我们将这个数据的上下的id拿到手,此时角色互换,需要将musicId回传给songDetail页面 

 为了防止多次订阅,我们这里还需要使用PubSub.unsubscribe('musicId')取消订阅 

切换歌曲功能实现

上一步,我们已经成功的实现了俩个页面之间的通信

之前,我们就封装好了一个函数来获取音乐的i详细信息,这里我们就直接调用它 

这样我们就能实现上下音乐的切换了。现在我们要实现一个新的功能,那就是自动播放当前的音乐

还是调用我们之前的方法。现在有一个bug,就是我们如果选择第一首音乐,然后按<发现报错 

因为我们在下标为0在去找,不就是为-1了吗。也就是我们要考虑第1首和最后1首,当我们点击点1首,让他切换到最后1首,最后1首切换到第1首

完整效果 

解决了一个小bug 这一块搞错了,导致页面跟系统任务栏控制音乐播放状态显示不一致稍微跟想象的不同

http://www.lryc.cn/news/69252.html

相关文章:

  • 如何学习网络安全?
  • 软件测试适合女生吗?
  • 华为云——代码托管的使用
  • ChatGPT从⼊⻔到精通
  • node + alipay-sdk 沙箱环境简单测试电脑网站支付
  • 卷积神经网络详解
  • API架构的选择,RESTful、GraphQL还是gRPC
  • 人机融合智能的测量、计算与评价
  • 虹科新品 | 高可靠性、可适用于高磁/压的线性传感器!
  • 支付系统设计五:对账系统设计01-总览
  • 阿里三面过了,却无理由挂了,HR反问一句话:为什么不考虑阿里?
  • 办公智慧化风起云涌,华为MateBook X Pro 2023是最短距离
  • 分布式项目 09.服务器之间的通信和三个工具类
  • C# 基本语法
  • 做网络爬虫需要掌握哪些技术?
  • 工作利器:三种简单方法将PPT转换成PDF
  • 《设计模式》状态模式
  • 2023年好用的设计图制作软件推荐
  • JavaNote_1.0.2_Spring
  • 微服务多模块:Springboot+Security+Redis+Gateway+OpenFeign+Nacos+JWT (附源码)仅需一招,520彻底拿捏你
  • HNU数据结构与算法分析-作业4-图结构
  • AMPL IDE语法整理
  • 从0-1搭建支持gb28181协议搭建流媒体平台
  • 数据结构与算法之栈: Leetcode 682. 棒球比赛 (Typescript版)
  • E-office Server_v9.0 漏洞分析
  • MySQL数据库,JDBC连接数据库操作流程详细介绍
  • libevent高并发网络编程 - 06_基于libevent的C++线程池实现
  • 【Java EE 初阶】线程安全及死锁解决方案
  • C语言函数大全-- _w 开头的函数(5)
  • 机械大专生能学会云计算吗,完全零基础的