文章详情 背景音频播放

project.private.config.json

@@ -9,6 +9,20 @@
     "miniprogram": {
       "list": [
         {
+          "name": "pages/classify/index",
+          "pathName": "pages/classify/index",
+          "query": "id=9",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/article/index",
+          "pathName": "pages/article/index",
+          "query": "id=8",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "文章详情",
           "pathName": "pages/article/index",
           "query": "id=8",
@@ -81,5 +95,5 @@
       ]
     }
   },
-  "libVersion": "3.7.5"
+  "libVersion": "3.7.7"
 }

src/app.json

@@ -55,5 +55,6 @@
   },
   "componentFramework": "glass-easel",
   "sitemapLocation": "sitemap.json",
-  "lazyCodeLoading": "requiredComponents"
+  "lazyCodeLoading": "requiredComponents",
+  "requiredBackgroundModes": ["audio"]
 }

src/pages/article/index.ts

@@ -24,12 +24,16 @@ Page({
     toastShow: false,
     toastType: 3,
     previewImg: true,
+
+    listener: false,
+    globalStop: false,
   },
-  innerAudioContext: null as WechatMiniprogram.InnerAudioContext | null,
+  BackgroundAudioManager: null as WechatMiniprogram.BackgroundAudioManager | null,
   onLoad(options) {
-    this.innerAudioContext = wx.createInnerAudioContext();
+    this.BackgroundAudioManager = wx.getBackgroundAudioManager();
     this.setData({
       BookId: options.id,
+      globalStop: this.BackgroundAudioManager.paused,
     });
     if (options.cid) {
       this.setData({
@@ -46,12 +50,6 @@ Page({
       this.getDetail();
     });
   },
-  onUnload() {
-    if (this.innerAudioContext) {
-      this.innerAudioContext?.stop();
-      this.innerAudioContext?.destroy();
-    }
-  },
   getChapterList() {
     wx.ajax({
       method: 'GET',
@@ -102,6 +100,7 @@ Page({
           title: res.book.BookName,
         });
         this.handleView();
+        this.initBackgroundAudioManager();
       })
       .catch((err) => {
         if (err.data.code === 403) {
@@ -181,57 +180,107 @@ Page({
       });
     });
   },
-
-  handlePlay() {
-    const { chapter, play, currentTime } = this.data;
-    if (this.innerAudioContext) {
-      if (play) {
-        this.innerAudioContext.stop();
-        return;
-      }
-      this.innerAudioContext.stop();
-      this.innerAudioContext.src = chapter.AudioUrl.url;
-      this.innerAudioContext.seek(currentTime);
-      this.innerAudioContext.play();
-      const listener = () => {
-        if (this.innerAudioContext && !this.data.drag) {
-          const { currentTime, duration } = this.innerAudioContext;
-          const time = `${this.formatTime(currentTime)}/${this.formatTime(duration)}`;
-          const progress = (currentTime / duration) * 100;
-          this.setData({
-            time,
-            progress,
-            currentTime,
-            play: true,
-          });
-        }
-      };
-      this.innerAudioContext.onTimeUpdate(listener);
-      this.innerAudioContext.onEnded(() => {
-        this.innerAudioContext?.seek(0);
-        const time = `00:00/${this.formatTime(chapter.AudioUrl.duration)}`;
+  initBackgroundAudioManager() {
+    const { chapter } = this.data;
+    if (this.BackgroundAudioManager) {
+      if (this.BackgroundAudioManager.src === chapter.AudioUrl.url && !this.BackgroundAudioManager.paused) {
+        this.setData({
+          play: true,
+        });
+        this.backgroundAudioManagerListener();
+      } else {
+        this.backgroundAudioManagerListener();
         this.setData({
-          play: false,
           progress: 0,
-          time,
           currentTime: 0,
         });
-      });
-      this.innerAudioContext.onPlay(() => {
+      }
+    }
+  },
+  backgroundAudioManagerListener() {
+    const { chapter } = this.data;
+    if (!this.BackgroundAudioManager) return;
+    const timeUpdateListener = () => {
+      const isCurrent = this.BackgroundAudioManager?.src === chapter.AudioUrl.url;
+      if (this.BackgroundAudioManager && !this.data.drag && this.data.play && isCurrent) {
+        const { currentTime, duration } = this.BackgroundAudioManager;
+        const time = `${this.formatTime(currentTime)}/${this.formatTime(duration)}`;
+        const progress = (currentTime / duration) * 100;
         this.setData({
-          play: true,
+          time,
+          progress,
+          currentTime,
         });
+      }
+    };
+    const endedListener = () => {
+      const time = `00:00/${this.formatTime(chapter.AudioUrl.duration)}`;
+      this.setData({
+        play: false,
+        progress: 0,
+        time,
+        currentTime: 0,
+        globalStop: true,
       });
-      this.innerAudioContext.onPause(() => {
-        this.setData({
-          play: false,
-        });
+    };
+    const playListener = () => {
+      const isCurrent = this.BackgroundAudioManager?.src === chapter.AudioUrl.url;
+      if (!isCurrent) return;
+      this.setData({
+        play: true,
       });
+    };
+    const pauseListener = () => {
+      this.setData({
+        play: false,
+      });
+    };
+    const stopListener = () => {
+      const time = `00:00/${this.formatTime(chapter.AudioUrl.duration)}`;
+      this.setData({
+        play: false,
+        globalStop: true,
+        progress: 0,
+        time,
+        currentTime: 0,
+      });
+    };
+    this.BackgroundAudioManager.onTimeUpdate(timeUpdateListener);
+    this.BackgroundAudioManager.onEnded(endedListener);
+    this.BackgroundAudioManager.onPlay(playListener);
+    this.BackgroundAudioManager.onPause(pauseListener);
+    this.BackgroundAudioManager.onStop(stopListener);
+    this.setData({
+      listener: true,
+    });
+  },
+  handlePlay() {
+    const { chapter, currentTime, play, listener, globalStop } = this.data;
+    if (play) return;
+    if (this.BackgroundAudioManager) {
+      if (this.BackgroundAudioManager.src !== chapter.AudioUrl.url || globalStop) {
+        this.BackgroundAudioManager.title = chapter.ChapterName;
+        this.BackgroundAudioManager.coverImgUrl = chapter.CoverUrl;
+        this.BackgroundAudioManager.src = chapter.AudioUrl.url;
+      } else {
+        this.BackgroundAudioManager.play();
+        this.BackgroundAudioManager.seek(this.BackgroundAudioManager.currentTime || currentTime);
+      }
+      if (!listener) {
+        this.backgroundAudioManagerListener();
+      }
     }
+    this.setData({
+      globalStop: false,
+    });
   },
   handlePause() {
-    if (this.innerAudioContext) {
-      this.innerAudioContext.pause();
+    const { play } = this.data;
+    if (this.BackgroundAudioManager && play) {
+      this.setData({
+        play: false,
+      });
+      this.BackgroundAudioManager.pause();
     }
   },
   handleDragStart() {
@@ -244,12 +293,12 @@ Page({
       drag: false,
     });
     if (this.data.play) {
-      this.innerAudioContext?.seek(this.data.currentTime);
+      this.BackgroundAudioManager?.seek(this.data.currentTime);
     }
   },
   handleDrag(e: any) {
     const current = e.detail.value;
-    const duration = this.innerAudioContext?.duration || this.data.chapter.AudioUrl.duration;
+    const duration = this.BackgroundAudioManager?.duration || this.data.chapter.AudioUrl.duration;
     const currentTime = (current / 100) * duration;
     const time = `${this.formatTime(currentTime)}/${this.formatTime(duration)}`;
     this.setData({

src/pages/article/index.wxml

@@ -26,7 +26,7 @@
       class="progress"
       custom-class="progress"
       step="0.001"
-      model:value="{{progress}}"
+      value="{{progress}}"
       bar-height="12rpx"
       active-color="#3795F7"
       inactive-color="#FFFFFF"