简单实现微信小程序音乐音频播放的功能
效果图:
1)获取歌曲详情页的数据
从每日推荐列表点击各歌曲跳转到歌曲详情页的时候,需要携带歌曲的id,在路由中把歌曲的id传到歌曲详情页的页面中使用(在wxml文件中通过data-id的形式把id传歌曲id)
recommendSong.js
// 跳转至songDetail的回调tosongDetail(event){let musicId=event.currentTarget.dataset.idconsole.log(song)// 路由跳转传参可以使用query的形式wx.navigateTo({url: '/pages/songDetail/songDetail?musicId='+musicId,})},
2)在songDetail.js文件中,可以在onload这个周期函数中的options参数里获取到recommendSong.js中通过路由传过来的参数,然后拿到musicId去调用歌曲详情页的接口获取歌曲详情数据
songDetail.js
data: {isPlay:false, //标识音乐是否播放song:{},musicId:'', //音乐的Id},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 获取音乐idlet musicId=options.musicIdthis.setData({musicId})this.getMusicInfo(musicId)},// 封装获取音乐详情的功能函数async getMusicInfo(musicId){let songData=await request('/song/detail',{ids:musicId})// console.log(songData)// 更新song详情对象this.setData({song:songData.songs[0]})},
3)
- 渲染完页面之后,需要实现音乐的播放或者暂停功能(通过打的标识isPlay实现),
- 点击播放按钮的时候进行播放,绑定相应的点击事件函数,
- 需要实现播放功能,需要封装一个音频播放函数,在点击事件进行的时候同步进行播放或者暂停
(1)调用相应的接口获取到相应的音乐播放地址
(2)获取到实现音频播放的实例,背景播放通过wx.getBackgroundAudioManager()
(3)若要播放(isPlay为true)把地址添加进这个音频实例的src属性里面去,实现播放功能,同时还要给这个实例添加一个title属性才不会报错
(4)若要暂停,也要通过这个音频实例调用pause方法进行实现
<text class="iconfont {{isPlay?'icon-zanting': 'icon-bofang'}} big" bindtap="handleMusicPlay"></text>
songDetail.js
// 点击播放或暂停的回调handleMusicPlay(){let isPlay=!this.data.isPlay// 修改是否播放的状态this.setData({isPlay})let {musicId}=this.datathis.musicControl(isPlay,musicId)},// 封装控制音乐播放暂停的功能函数async musicControl(isPlay,musicId){// 获取音乐的播放地址let musicLinkData=await request('/song/url',{id:musicId})let musicLink=musicLinkData.data[0].urllet backgroundAudioManager=wx.getBackgroundAudioManager()if (isPlay) {//播放音乐// 生成背景音频实例backgroundAudioManager.src=musicLinkbackgroundAudioManager.title=this.data.song.name}else{//暂停音乐backgroundAudioManager.pause()}},
到这里点击播放音频的时候,还会出现报错,如下:
根据提示需要在app.json中配置相应属性才能实现audio的播放效果:
"requiredBackgroundModes": ["audio"]
简单实现微信小程序音乐音频播放的功能相关推荐
- 微信小程序录音+音频播放(解决ios无法音频播放问题)
微信小程序录音+播放 1.创建全局变量 const audioManager = wx.getRecorderManager(): const innerAudioContext = wx.creat ...
- 微信小程序html5音频,微信小程序 audio音频播放详解及实例
loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...
- 微信小程序全局音频播放,实现分析
1. 需求分析 育儿柚道小程序中有针对育儿教育提供的音频课程,主要包含读书.读文的音频内容. 1.1 功能需求 课程音频:包含课程音频的地方有三处 课程卡片,包含在 scrollview 中的试听内容 ...
- 微信小程序:音频播放器
由于产品需求,需要做一个自定义音频播放器,现在也差不多做完了,接下来呢,给大家分享一下,大家先来看看效果图哦~ 这里呢,我选择的是 wx.createInnerAudioContext 这个方法,大家 ...
- 微信小程序 --- 音乐的播放和控制
音乐的播放和控制 转载于:https://www.cnblogs.com/e0yu/p/8489509.html
- 微信小程序实现音频播放
废话不多说直接上代码,亲测可用 Page({data: {isPlay: false,},onLoad() {this.audioPlay()},//创建语音示例进行播放createAudio(e) ...
- 微信小程序实现音频播放,带有点击上一首和下一首的功能
1.注册音频的Api const innerAudioContext = wx.createInnerAudioContext(); 2.需要用到数据 exhibitList: [], //资源列表a ...
- 微信小程序简易音频播放器(wx.getBackgroundAudioManager())
开发工具:微信开发者工具 源代码(百度网盘:)链接: 提取码:ldb9 注意:如果点击播放没反应,或者爆红,则需要更换js中的视频地址 第一步.首先要在app.json里设置: "requi ...
- 微信小程序音乐播放器
趁周末做一个简单的微信小程序音乐播放器,源码已留. 播放列表首页wxml <swiper class="swiper" indicator-dots='{{swipterSe ...
最新文章
- 深入讨论.NET Socket的Accept方法
- 如何优雅的使用Mock Server
- python跨进程共享内存
- XGBoost的基本使用应用Kaggle便利店销量预测
- 51Nod 1314 定位系统
- wxWidgets:wxModule类用法
- Android 应用 之路 百度地图API使用(3)
- 大学c语言程序设计期末考试试卷,大学大一c语言程序设计期末考试试卷及答案.doc...
- Brave Game【博弈】
- android 壁纸服务,8.1 初识Android壁纸
- WIN10 删除文件 找不到该项目
- 联想台式主机拆机教程_联想主机外壳怎么拆开_联想主机怎么拆图解
- android root查看目录权限,Android真机获取root权限,进入data目录
- 推荐程序员看的一些BLOG
- Windows驱动签名解决方案
- App Designer中自建回调函数
- stm32—超声波传感器
- 用C语言编程写高考祝福,2020高考祝福自己的句子_高考给自己加油打气的话精选100句...
- 09年NBA全明星候选名单和投票方法
- 云原生时代,我们为何离不开混沌工程?
热门文章
- python注释第一行_python第一行注释是什么意思?
- 40+个工业检测数据集
- 免费的实时数据库,我们该选谁?----BerkeleyDB与SQLite评测对比
- 消息栏通知(Notification)介绍
- iPhone自定义手机铃声完整版教程
- mp3怎么转换成m4r(iPhone铃声制作)
- java 拼图游戏_Java学员作品-拼图游戏
- [转载] 晓说——第24期:“看美国”系列之人类精华犹太人(下)
- 2022-01-19:青蛙过河。 一只青蛙想要过河。 假定河流被等分为若干个单元格,并且在每一个单元格内都有可能放有一块石子(也有可能没有)。 青蛙可以跳上石子,但是不可以跳入水中。 给你石子的位置列
- oracle创建用户,授权connect,resource后无法建表