使用wx.getBackgroundAudioManager()方法播放背景音乐即便突出也会显示音乐播放
1、成品展示
单击右上角按钮播放音乐
2、样式设置
2.1html样式
<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}} " bindtap="play"> <image src="/pages/images/music_icon.png" /> <image src="/pages/images/music_play.png" /> </view>
music_icon.png黑胶唱片,music_play.png长臂照片
2.2css样式
/**index.wxss**/ /* page { height: 100vh; display: flex; flex-direction: column; } */ /* 音乐图标播放模块 */ .player{ position: fixed; top:20rpx; right: 20rpx; z-index: 1; } .player >image:first-child{ width: 80rpx; height: 80rpx; animation: musicRotate 3s linear infinite; } .player >image:last-child{ width: 28rpx; height: 80rpx; margin-left: -2px; } @keyframes musicRotate{ from{transform: rotate(0deg);} to {transform: rotate(360deg);} } .player-play>image:first-child{ animation-play-state: running; } .player-play>image:last-child{ animation: musicStart 0.2 linear forwards; } .player-pause > image:first-child{ animation-play-state: paused; } .player-pause>image:last-child{ animation: musicStop 0.2s linear forwards; } @keyframes musicStart{ from{transform: rotate(0deg);} to{transform: rotate(20deg);} } @keyframes musicStop{ from{transform: rotate(20deg);} to{transform: rotate(0deg);} }
3、效果实现
3.1点击图片旋转
data:{ isPlayingMusic:false, },
play:function(e){
this.setData({ isPlayingMusic:!this.data.isPlayingMusic }) }
3.2音乐播放
Page({ data:{ isPlayingMusic:false, }, bgm:null, music_url:'https://m10.music.126.net/20240526184405/1d9f433e2724be2617af66ca88eb7a82/ymusic/030f/540e/0459/4e5e1c9038cd3bc7cd9133c96db67423.mp3', music_coverImgUrl:'https://p1.music.126.net/FeMM29SxRV1CcNaaC5_F_A==/109951164042227752.jpg', onReady:function(){ this.bgm= wx.getBackgroundAudioManager() this.bgm.title = 'marry me' this.bgm.epname="wedding" this.bgm.singer="singer" this.bgm.coverImgUrl=this.music_coverImgUrl console.log(this.bgm) console.log(this.bgm.title) this.bgm.onCanplay(()=>{ this.bgm.pause() }) this.bgm.src = this.music_url }, play:function(e){ if(this.data.isPlayingMusic){ this.bgm.pause() }else{ this.bgm.play() } this.setData({ isPlayingMusic:!this.data.isPlayingMusic }) } })
标签:play,背景音乐,rotate,player,bgm,isPlayingMusic,------,播放 From: https://www.cnblogs.com/lixianhui/p/18214119