微信小程序音乐播放器组件

时间:2022-08-29 20:27:09

wxml

<image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/>

JS

Page({
data:{
isPlay:false
},
onLoad(){
var self = this;
//监听音乐播放
wx.onBackgroundAudioPlay((result)=>{
self.setData({
isPlay:true
})
});
//监听音乐停止
wx.onBackgroundAudioPause((result)=>{
self.setData({
isPlay:false
})
});
},
//执行点击事件,如果播放就停止,如果停止就播放
click(){
if(this.data.isPlay){
wx.pauseBackgroundAudio();
this.setData({
isPlay:fasle
})
}else{
//开始音乐播放
wx.playBackgroundAudio({
dataUrl:"",
title:"",
coverImgUrl:""
});
this.setData({
isPlay:true
})
}
}
})

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达叔小生的简书!

这是一个有质量,有态度的博客

微信小程序音乐播放器组件

微信小程序音乐播放器组件的更多相关文章

  1. 微信小程序音乐播放器

    写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...

  2. 微信小程序音乐播放

    最近在写一个艾美食艾音乐的微信小程序,其中有用到音乐播放的功能,基本播放切换功能已经实现,但是在反复切换歌曲.重新进入歌曲以及单曲循环.列表循环的测试过程中还是发生了bug,特此写一篇文章,捋一下思路 ...

  3. 微信小程序——音频播放器

    先来个效果图韵下味: 需求: 音频的播放,暂停,中间按钮状态的变化,播放时实时更新播放进度: 前进15s,后退15s: 进度条拖动. 一开始想着这3个功能应该挺简单的.不就是播放,暂停,前进,后退么~ ...

  4. 微信小程序---音乐播放和控制

    1.效果图如下: 2.代码如下: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInf ...

  5. 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...

  6. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  7. 微信小程序api拦截器

    微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...

  8. 微信小程序&lpar;二十&rpar;-UI组件&lpar;Vant Weapp&rpar;-01按装配置

    1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...

  9. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

随机推荐

  1. dos 固定ip命令

    dos 固定ip命令 ***************************************************************************************** ...

  2. 实现在Android 进程和线程

    进程和线程 如果某个应用程序组件是第一次被启动,且这时应用程序也没有其他组件在运行,则Android系统会为应用程序创建一个包含单个线程的linux进程.默认情况下,同一个应用程序的所有组件都运行在同 ...

  3. HDU 5091---Beam Cannon(线段树&plus;扫描线)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5091 Problem Description Recently, the γ galaxies bro ...

  4. Android开发学习——搭建开发环境

    在学校开课学习了android的一些简单的UI组件,布局,四大组件学习了2个,数据存储及网络通信,都是一些简单的概念,入门而已.许多东西需要自己去学习. 学习一下 Android开发环境的搭建,两种方 ...

  5. Input checkbox 添加样式背景

    <style type="text/css"> .chk_1 { width: 20px; height: 20px; position: absolute; top: ...

  6. MyBatis关联查询 &lpar;association&rpar; 时遇到的某些问题&sol;mybatis映射

    先说下问题产生的背景: 最近在做一个用到MyBatis的项目,其中有个业务涉及到关联查询,我是将两个查询分开来写的,即嵌套查询,个人感觉这样更方便重用: 关联的查询使用到了动态sql,在执行查询时就出 ...

  7. nandflash操作详解

    1.nandflash就是嵌入式系统的硬盘 2.分类(1)MLC:存储单元格存储两位,慢,偏移,寿命短,容量大(2)SLC:存储一位.快,寿命长,容量小,昂贵 3访问:(1)独立编址,有专用的控制器, ...

  8. 某公司ASP&period;NET应聘上机试题

    ASP.NET笔试题是ASP.NET程序员面试必须经历的,一般会叫你填两个表 1个是你的详细信息表 1个是面试题答卷 两个都要注意反正面是否都有内容不要遗漏,如果考你机试一般也有两种,就是程序连接数据 ...

  9. &lbrack;BZOJ3675&rsqb;序列分割

    3675: [Apio2014]序列分割 Time Limit: 40 Sec  Memory Limit: 128 MB Description 小H最近迷上了一个分隔序列的游戏.在这个游戏里,小H ...

  10. Linux中rpm命令用法听语音

    rpm 是红帽(RedHat)软件包管理工具,实现类似于 Windows 中的添加/删除程序功能.下面,就来向大家介绍 rpm 命令的用法. 工具/原料 CentOS 一.rpm常用参数 1 rpm ...