BackgroundAudioManager.offCanplay

backgroundAudioManager.onCanplay(callback)

<!-- index.ttml -->
<view class="container">
  <view class="body body-bg">
    <view class="page-section page-section-space">
      <view class="page-body-buttons">
        <block tt:if="{{playing === true}}">
          <view class="page-body-button" bindtap="stop">
            <image src="{{imageUrl+'stop.png'}}"></image>
          </view>
          <view class="page-body-button" bindtap="pause">
            <image src="{{imageUrl+'pause.png'}}"></image>
          </view>
        </block>
        <block tt:if="{{playing === false}}">
          <view class="page-body-button"></view>
          <view class="page-body-button" bindtap="play">
            <image src="{{imageUrl+'play.png'}}"></image>
          </view>
        </block>
        <view class="page-body-button"></view>
      </view>
      <view class="page-section-title page-section-title-space"
        >监听背景音频进入可播放状态事件。 但不保证后面可以流畅播放。</view
      >
    </view>
    <button type="primary" class="off-canplay-btn" bindtap="offCanplay">
      offCanplay
    </button>
  </view>
</view>

// index.js
const musicUrl =
  "https://sf1-ttcdn-tos.pstatp.com/obj/developer/sdk/0000-0001.mp3";

const app = getApp();
Page({
  data: {
    imageUrl: app.globalData.imageUrl,
    playing: false,
    paused: false,
  },
  onCanplayCallback: null,
  backgroundAudioManager: null,

  onLoad() {
    this.backgroundAudioManager = tt.getBackgroundAudioManager();
    const bgam = this.backgroundAudioManager;
    this.canUpdateUI = true;
    bgam.startTime = 0;
    bgam.title = "测试背景音乐";
    bgam.audioPage = { path: "pages/API/BackgroundAudioManager.play" };
    bgam.onPlay(() => {
      this.updateUI();
    });
    bgam.onPause(() => {
      this.updateUI();
    });
    bgam.onStop(() => {
      this.updateUI();
    });
    this.onCanplayCallback = () => {
      this.updateUI();
      tt.showToast({
        title: "背景音频进入可播放状态",
        icon: "none",
      });
    };
    bgam.onCanplay(this.onCanplayCallback);
    bgam.onEnded(() => {
      this.updateUI();
    });
  },
  updateUI() {
    const bgam = this.backgroundAudioManager;
    if (this.canUpdateUI) {
      this.setData({
        playing: !bgam.paused,
      });
    }
  },
  pause() {
    this.backgroundAudioManager.pause();
    this.updateUI();
  },
  play() {
    if (!this.backgroundAudioManager.src) {
      this.backgroundAudioManager.src = musicUrl;
    }
    this.backgroundAudioManager.play();
    this.updateUI();
  },
  stop() {
    this.backgroundAudioManager.stop();
    this.updateUI();
  },
  offCanplay() {
    if (this.onCanplayCallback) {
      this.backgroundAudioManager.offCanplay(this.onCanplayCallback);
      this.onCanplayCallback = null;
      tt.showToast({
        title: "offCanplay",
        icon: "none",
      });
    }
  },
});

/* index.ttss */
.body-bg {
  border-radius: 18rpx;
  background: #8c8c8c;
  overflow: hidden;
}

image {
  width: 150rpx;
  height: 150rpx;
}

.page-body-buttons {
  display: flex;
  justify-content: space-around;
  margin: 50rpx 0;
}

.page-body-button {
  width: 250rpx;
  text-align: center;
}

.page-section {
  overflow: hidden;
  margin-bottom: 0;
}

.page-section-title-space {
  color: #eee;
}