init

xhs-mini-demos/component-case/background-audio/background-audio.css

@@ -0,0 +1,35 @@
+image {
+  width: 75px;
+  height: 75px;
+}
+
+.page-body-wrapper {
+  margin-top: 0;
+}
+.page-body-info {
+  padding-bottom: 25px;
+}
+.time-big {
+  font-size: 30px;
+  margin: 10px;
+}
+.slider {
+  width: 90%;
+}
+.play-time {
+  font-size: 14px;
+  width: 350px;
+  padding: 10px 0;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.page-body-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 50px;
+}
+.page-body-button {
+  width: 225px;
+  text-align: center;
+}

xhs-mini-demos/component-case/background-audio/background-audio.js

@@ -0,0 +1,119 @@
+const app = getApp();
+const util = require('../../util/util.js');
+
+const backgroundAudioManager = xhs.getBackgroundAudioManager();
+let updateInterval;
+
+Page({
+  onShareAppMessage() {
+    return {
+      title: '背景音乐',
+      path: 'packageAPI/pages/background-audio/background-audio',
+    };
+  },
+  onShow() {
+    if (!backgroundAudioManager.paused && backgroundAudioManager.paused !== undefined) {
+      this._enableInterval();
+      this.setData({
+        playing: true,
+      });
+    }
+  },
+  onLoad() {
+    const that = this;
+    // 监听播放事件
+    backgroundAudioManager.onPlay(() => {
+      // 刷新播放时间
+      this._enableInterval();
+      this.setData({
+        pause: false,
+      });
+    });
+
+    // 监听暂停事件
+    backgroundAudioManager.onPause(() => {
+      clearInterval(updateInterval);
+      that.setData({
+        playing: false,
+        pause: true,
+      });
+    });
+
+    backgroundAudioManager.onEnded(() => {
+      clearInterval(updateInterval);
+      that.setData({
+        playing: false,
+        playTime: 0,
+        formatedPlayTime: util.formatTime(0),
+      });
+    });
+
+    backgroundAudioManager.onStop(() => {
+      clearInterval(updateInterval);
+      that.setData({
+        playing: false,
+        playTime: 0,
+        formatedPlayTime: util.formatTime(0),
+      });
+    });
+  },
+
+  data: {
+    playing: false, // 播放状态
+    pause: false,
+    playTime: 0, // 播放时长
+    formatedPlayTime: '00:00:00', // 格式化后的播放时长
+  },
+
+  play() {
+    backgroundAudioManager.title = '此时此刻';
+    backgroundAudioManager.epname = '此时此刻';
+    backgroundAudioManager.singer = '许巍';
+    backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000';
+
+    const that = this;
+    if (that.data.pause) {
+      backgroundAudioManager.play();
+      this.setData({
+        playing: true,
+      });
+    } else {
+      that.setData({
+        playing: true,
+      }, () => {
+        // 设置src后会自动播放
+        backgroundAudioManager.src = 'https://dldir1.qq.com/music/release/upload/t_mm_file_publish/2339610.m4a';
+      });
+    }
+  },
+
+  seek(e) {
+    backgroundAudioManager.seek(e.detail.value);
+  },
+
+  pause() {
+    clearInterval(updateInterval);
+    backgroundAudioManager.pause();
+  },
+
+  stop() {
+    clearInterval(updateInterval);
+    backgroundAudioManager.stop();
+  },
+
+  _enableInterval() {
+    const that = this;
+    function update() {
+      console.log(backgroundAudioManager.currentTime);
+      that.setData({
+        playTime: backgroundAudioManager.currentTime + 1,
+        formatedPlayTime: util.formatTime(backgroundAudioManager.currentTime + 1),
+      });
+    }
+    updateInterval = setInterval(update, 1000);
+  },
+
+  onUnload() {
+    clearInterval(updateInterval);
+  },
+});

xhs-mini-demos/component-case/background-audio/background-audio.json

@@ -0,0 +1,3 @@
+{
+   "navigationBarTitleText": "背景音频"
+}

xhs-mini-demos/component-case/background-audio/background-audio.xhsml

@@ -0,0 +1,32 @@
+<view class="container">
+  <template is="head" data="{{title: 'backgroundAudio'}}"/>
+
+  <view class="page-section">
+    <view class="page-body-info">
+      <text class="time-big">{{formatedPlayTime}}</text>
+      <slider class="slider" min="0" max="269" step="1" value="{{playTime}}" bindchange="seek"></slider>
+      <view class="play-time">
+        <text>00:00</text>
+        <text>04:29</text>
+      </view>
+    </view>
+    <view class="page-body-text tc">注意：离开当前页面后背景音乐将保持播放，但退出小程序将停止</view>
+    <view class="page-body-buttons">
+      <block xhs:if="{{playing === true}}">
+        <view class="page-body-button" bindtap="stop">
+          <image src="/image/stop.png"></image>
+        </view>
+        <view class="page-body-button" bindtap="pause">
+          <image src="/image/pause.png"></image>
+        </view>
+      </block>
+      <block xhs:if="{{playing === false}}">
+        <view class="page-body-button"></view>
+        <view class="page-body-button" bindtap="play">
+          <image src="/image/play.png"></image>
+        </view>
+      </block>
+      <view class="page-body-button"></view>
+    </view>
+  </view>
+</view>