收藏
回答

背景音乐循环播放可以实现吗?

背景音乐循环播放

回答关注问题邀请回答
收藏

3 个回答

  • TNT
    TNT
    2021-08-27
      onReady() {
        this.back = wx.getBackgroundAudioManager()
        // 对实例进行设置
        this.back.src = "https://qiniu-video.qtshe.com/qtshe.mp3"
        this.back.title = '青团社8周年庆' // 标题为必选项
        this.back.play() // 开始播放
        // 1、onEnded监听播放自然结束
        this.back.onEnded(() => {
          // 2、必须重新设置src才能循环之后会重新自动播放
          this.back.src = "https://qiniu-video.qtshe.com/qtshe.mp3"
        })
        this.back.onStop((res) => {
          this.setData({ start: !this.data.start })
          this.close = true
          this.back.pause();
        })
      },
    
    
      handleProxy() {
        this.back.pause(); // 点击音乐图标后触发的暂停或开始操作
        this.setData({ start: !this.data.start })
        if (this.data.start) {
          if (this.close) {
            this.close = false
            this.back.src = "https://qiniu-video.qtshe.com/qtshe.mp3"
          } else {
            this.back.play();
          }
          console.log("背景音乐已开启");
        } else {
          this.back.pause();
          console.log("背景音乐已暂停");
        }
      },
    


    <image src="https://qiniu-image.qtshe.com/20210719music.png" class="music-icon {{start ? '' : 'active'}}" bindtap="handleProxy" />
    


    .music-icon {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      right: 32rpx;
      top: 180rpx;
      -webkit-animation: rotate 4s linear infinite;
    }
    
    
    .music-icon.active {
      -webkit-animation-play-state: paused;
    }
    
    
    /*定义动画  旋转一周*/
    @-webkit-keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
    
    
      100% {
        transform: rotate(360deg);
      }
    }
    
    2021-08-27
    有用 5
    回复 1
    • 红小豆
      红小豆
      2021-08-27
      太棒了 ,那我就拿来主义了
      2021-08-27
      回复
  • 安逸
    安逸
    2021-08-27

    可以

    2021-08-27
    有用 1
    回复
  • 一笑皆春
    一笑皆春
    2021-08-27

    可以的

    2021-08-27
    有用 2
    回复
登录 后发表内容