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

川长思鸟来 2021-07-24 21:06 489阅读 0赞

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
                })
            }
        }
    })

###  ###

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

###  ###

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

### 欢迎关注[达叔小生][Link 1]的简书！ ###

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

![博客][2019082308472271.jpeg]

[Link 1]: https://www.jianshu.com/u/c785ece603d1
[2019082308472271.jpeg]: https://img-blog.csdnimg.cn/2019082308472271.jpeg

发表评论取消回复

表情：

评论列表（有 0 条评论，489人围观）

还没有评论，来说两句吧...

相关阅读

相关基于微信小程序的音乐播放器设计

目录 1绪论 1 1.1选题背景及意义 1 1.2发展现状 1 1.2.1什么是微信小程序 1 1.2.2小程序市场的现状 4 1.3研究主要内容 4

水深无声/ 2024年04月01日 12:37/ 0 赞/ 77 阅读

相关写一个音乐播放器的微信小程序

要创建一个音乐播放器的微信小程序，您需要熟悉微信小程序的开发环境和语言(如 JavaScript 和 WXML/WXSS)。具体来说，您需要做以下几件事： 1. 设计音

我会带着你远行/ 2024年03月25日 08:51/ 0 赞/ 95 阅读

相关小音乐播放器

我也忘记从哪里借鉴的了，很好看，代码和资源在压缩包里面，大家下载解压就可以运行了或者百度网盘下载链接：https://pan.baidu.com/s/1AB1fSdSG

女爷i/ 2024年03月17日 18:16/ 0 赞/ 78 阅读

相关微信小程序（组件--视图组件）

【前言】什么是组件？组件就是我们写HTML的一些基本标签，比如div、span、p、ul、li等。在大多数HTML里面的标签，很多都是要自己写上一些效果的，但

逃离我推掉我的手/ 2023年06月18日 12:55/ 0 赞/ 29 阅读

相关微信小程序封装音乐播放器组件

微信小程序的官方文档中，已经有 audio 组件。  <audio poster="{ {poster}}" name=

桃扇骨/ 2023年01月13日 01:59/ 0 赞/ 340 阅读

相关微信小程序 - 组件

> 微信小程序为开发者提供了一系列基础组件，使开发者可以进行快速开发。同时还支持自定义组件，提升代码复用性，有助于代码维护。一、基础组件 > 基础组件主要分为：视图容

深碍√TFBOYSˉ_/ 2021年12月05日 17:47/ 0 赞/ 609 阅读

相关微信小程序-组件

1.轮播图 <swiper indicator-dots="{ {indicatorDots}}" indicator-color="{

客官°小女子只卖身不卖艺/ 2021年11月30日 00:56/ 0 赞/ 571 阅读

相关微信小程序音频播放器

最近在项目中有写到了一个音频，在这里总结一下首先传送地址： [https://developers.weixin.qq.com/miniprogram/dev/api/m

悠悠/ 2021年11月10日 08:52/ 0 赞/ 457 阅读

相关微信小程序地图组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 地图（v2.7.0 起支持[同层渲染][Link 1]，相关api [wx.createMapC

﹏ヽ暗。殇╰゛Y/ 2021年09月08日 07:14/ 0 赞/ 1042 阅读

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

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

川长思鸟来/ 2021年07月24日 21:06/ 0 赞/ 490 阅读