欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

微信小程序播放背景音乐的实例代码

程序员文章站 2022-06-22 11:59:26
目录1.实现效果2.实现原理3.实现代码1.实现效果2.实现原理1、wx.getbackgroundaudiomanager :获取全局唯一的背景音频管理器。 小程序切入后台,如果音频处于播放状态,可...

1.实现效果

微信小程序播放背景音乐的实例代码

2.实现原理

1、wx.getbackgroundaudiomanager :
获取全局唯一的背景音频管理器。 小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用api操纵音频的播放状态。

从微信客户端6.7.2版本开始,若需要在小程序切后台后继续播放音频,需要在 app.json 中配置 requiredbackgroundmodes 属性。开发版和体验版上可以直接生效,正式版还需通过审核。
2、onunload和onhide事件中暂停音乐的播放。
3、onshow中调用播放事件
4、在播放结束的事件中,再次播放,以达到循环播放的效果。
 

微信小程序播放背景音乐的实例代码

3.实现代码

<image src="{{checked?'../img/stop.png':'../img/play.png'}}" class="music {{!checked && 'circle'}}" catchtap="checkmusic"></image>
<view catchtap="tonext" class="btn"> 去下一个页面</view>
page {
  background-color: aliceblue;
}
.music {
  width: 86rpx;
  height: 86rpx;
  position: absolute;
  top: 108rpx;
  right: 10rpx;
  z-index: 99;
}
.circle {
  animation: cirlce 4s linear infinite;
}
@keyframes cirlce {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.btn {
  margin: 550rpx auto 0;
  width: 625rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #dd8449 0%, #e28e74 52%, #dbb290 100%);
  border-radius: 6rpx;
  font-size: 30rpx;
  color: #fff;
  line-height: 80rpx;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.btn:after {
  content: "";
  background: #999;
  position: absolute;
  width: 750rpx;
  height: 750rpx;
  left: calc(50% - 375rpx);
  top: calc(50% - 375rpx);
  opacity: 0;
  margin: auto;
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.4s ease-in-out;
}
// pages/effects/audiocust/index.js
page({

  data: {
    checked: false,
  },

  onshow: function () {
    this.player(wx.getbackgroundaudiomanager())
  },
  checkmusic() {
    console.log(11)
    this.setdata({
      checked: !this.data.checked
    })
    if (this.data.checked) {
      wx.getbackgroundaudiomanager().pause();
    } else {
      this.player(wx.getbackgroundaudiomanager())
    }
  },
  player(e) {
    e.title = '苏苏的音乐'
    e.src = "http://music.163.com/song/media/outer/url?id=36587407.mp3"
    //音乐播放结束后继续播放此音乐,循环不停的播放
    e.onended(() => {
      this.player(wx.getbackgroundaudiomanager())
    })
  },

  // 页面卸载时候暂停播放(不加页面将一直播放)
  onunload: function () {
    wx.getbackgroundaudiomanager().stop();
  },
  // 小程序隐藏时候暂停播放(不加页面将一直播放)
  onhide() {
    wx.getbackgroundaudiomanager().stop();
  },
  tonext() {
    wx.navigateto({
      url: '/pages/jscase/draw/index',
    })
  }
})

到此这篇关于微信小程序播放背景音乐的文章就介绍到这了,更多相关小程序播放背景音乐内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!