@realsee/vreo 2.6.2 → 2.6.4-alpha.1

package/lib/Player/Controller.d.ts

@@ -45,6 +45,11 @@ export declare class Controller extends Subscribe<VreoKeyframeEvent> {
     waveAppearance: WaveAppearance | null;
     appearance: Appearance;
     avatar: VreoVideo['avatar'];
+    /**
+     * 是否正在等待背景音乐加载
+     * 当此状态为 true 时，播放流程会暂停，等待音频加载完成
+     */
+    waitingForBgMusic: boolean;
     visible: boolean;
     /**
      * 获取当前播放媒体的类型
@@ -92,6 +97,11 @@ export declare class Controller extends Subscribe<VreoKeyframeEvent> {
      * @param ended - 是否已结束
      */
     setEnded(ended: boolean): void;
+    /**
+     * 设置是否正在等待背景音乐加载
+     * @param waiting - 是否正在等待
+     */
+    setWaitingForBgMusic(waiting: boolean): void;
     /**
      * 设置播放器外观
      * @param appearance - 外观配置对象

package/lib/Player/Controller.js

@@ -70,6 +70,7 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
       waveStyle: 'wave'
     });
     _defineProperty(_assertThisInitialized(_this), "avatar", {});
+    _defineProperty(_assertThisInitialized(_this), "waitingForBgMusic", false);
     _defineProperty(_assertThisInitialized(_this), "visible", false);
     _defineProperty(_assertThisInitialized(_this), "popUp", null);
     _defineProperty(_assertThisInitialized(_this), "drawerConfig", null);
@@ -99,7 +100,9 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
       setAppearance: action,
       configs: observable.ref,
       setEnded: action,
-      setAvatar: action
+      setAvatar: action,
+      waitingForBgMusic: observable,
+      setWaitingForBgMusic: action
     });
     reaction(function () {
       return [_this.appearance.waveStyle, _this.loading];
@@ -192,6 +195,11 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
     get:
     // null 表示加载失败
 
+    /**
+     * 是否正在等待背景音乐加载
+     * 当此状态为 true 时，播放流程会暂停，等待音频加载完成
+     */
+
     /**
      * 获取当前播放媒体的类型
      * @returns 'video' | 'avatar' | 'none' - 媒体类型
@@ -282,6 +290,16 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
       this.ended = ended;
     }
 
+    /**
+     * 设置是否正在等待背景音乐加载
+     * @param waiting - 是否正在等待
+     */
+  }, {
+    key: "setWaitingForBgMusic",
+    value: function setWaitingForBgMusic(waiting) {
+      this.waitingForBgMusic = waiting;
+    }
+
     /**
      * 设置播放器外观
      * @param appearance - 外观配置对象
@@ -370,10 +388,19 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "requestAnimationFrameLoop",
     value: function requestAnimationFrameLoop(callback) {
-      var _this$mediaInstance,
-        _this$mediaInstance4,
+      var _this$mediaInstance3,
+        _this$mediaInstance6,
         _this3 = this;
-      if ((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.ended && this.mediaInstance.currentTime !== 0) {
+      // 如果正在等待背景音乐加载，暂停整个播放流程
+      if (this.waitingForBgMusic) {
+        var _this$mediaInstance;
+        if (!((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.paused)) {
+          var _this$mediaInstance2;
+          (_this$mediaInstance2 = this.mediaInstance) === null || _this$mediaInstance2 === void 0 ? void 0 : _this$mediaInstance2.pause();
+        }
+        return;
+      }
+      if ((_this$mediaInstance3 = this.mediaInstance) !== null && _this$mediaInstance3 !== void 0 && _this$mediaInstance3.ended && this.mediaInstance.currentTime !== 0) {
         var _this$vreoUnit;
         if (this.ended) return;
         (_this$vreoUnit = this.vreoUnit) === null || _this$vreoUnit === void 0 ? void 0 : _this$vreoUnit.keyframes.forEach(function (keyframe) {
@@ -386,14 +413,14 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
         return;
       }
       if (!this.playing) {
-        var _this$mediaInstance2;
-        if (!((_this$mediaInstance2 = this.mediaInstance) !== null && _this$mediaInstance2 !== void 0 && _this$mediaInstance2.paused)) {
-          var _this$mediaInstance3;
-          (_this$mediaInstance3 = this.mediaInstance) === null || _this$mediaInstance3 === void 0 ? void 0 : _this$mediaInstance3.pause();
+        var _this$mediaInstance4;
+        if (!((_this$mediaInstance4 = this.mediaInstance) !== null && _this$mediaInstance4 !== void 0 && _this$mediaInstance4.paused)) {
+          var _this$mediaInstance5;
+          (_this$mediaInstance5 = this.mediaInstance) === null || _this$mediaInstance5 === void 0 ? void 0 : _this$mediaInstance5.pause();
         }
         return;
       }
-      if ((_this$mediaInstance4 = this.mediaInstance) !== null && _this$mediaInstance4 !== void 0 && _this$mediaInstance4.paused && this.playing) {
+      if ((_this$mediaInstance6 = this.mediaInstance) !== null && _this$mediaInstance6 !== void 0 && _this$mediaInstance6.paused && this.playing) {
         this.mediaInstance.play();
       }
       var currentKeyframes = this.currentKeyframes;

package/lib/Player/modules/keyframes/BgMusic/index.js

@@ -9,7 +9,8 @@ export function BgMusic() {
   React.useEffect(function () {
     var callback = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(keyframe, currentTime) {
-        var start, end, _currentTime, audio, cleanAudio, play;
+        var _controller$configs$w, _controller$configs;
+        var start, end, _currentTime, audio, waitForLoaded, cleanAudio, play, playOnCanPlay;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -24,32 +25,51 @@ export function BgMusic() {
               case 4:
                 audio = getAudio(keyframe.data.url);
                 audio.currentTime = Math.max(0, _currentTime);
-                // console.log('play', audio.src)
-                // const play = () => audio.play()
-
-                audio.play();
+                waitForLoaded = (_controller$configs$w = (_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.waitForBgMusicLoaded) !== null && _controller$configs$w !== void 0 ? _controller$configs$w : false;
                 cleanAudio = function cleanAudio() {
-                  // audio.removeEventListener('canplaythrough', play)
+                  audio.removeEventListener('canplay', playOnCanPlay);
                   audio.removeEventListener('pause', play);
                   audio.pause();
                   audio.src = '';
-                  // cleanTimeout()
-                }; // audio.addEventListener('canplaythrough', play)
-
-                audio.addEventListener('ended', function () {
-                  cleanAudio();
-                });
+                };
                 play = function play() {
                   if (audio.realSrc === keyframe.data.url) {
                     // 有可能会被其他音轨打断
                     audio.play();
                   }
+                }; // canplay 事件比 canplaythrough 更早触发，表示可以开始播放了
+                playOnCanPlay = function playOnCanPlay() {
+                  audio.removeEventListener('canplay', playOnCanPlay);
+                  audio.play();
+                  // 解除等待状态，恢复主时间线播放
+                  controller.setWaitingForBgMusic(false);
                 };
+                if (waitForLoaded) {
+                  // 等待音频加载完成后再播放
+                  // readyState: 0=HAVE_NOTHING, 1=HAVE_METADATA, 2=HAVE_CURRENT_DATA, 3=HAVE_FUTURE_DATA, 4=HAVE_ENOUGH_DATA
+                  if (audio.readyState >= 3) {
+                    // readyState >= 3 表示有足够数据开始播放
+                    audio.play();
+                  } else {
+                    // 设置等待状态，阻塞整个播放流程
+                    controller.setWaitingForBgMusic(true);
+                    // 监听 canplay 事件（可以开始播放）
+                    audio.addEventListener('canplay', playOnCanPlay);
+                  }
+                } else {
+                  // 默认行为：立即播放，边加载边播放
+                  audio.play();
+                }
+                audio.addEventListener('ended', function () {
+                  cleanAudio();
+                });
                 audio.addEventListener('pause', play);
                 controller.once('paused', function () {
+                  // 如果播放器暂停，也要解除等待状态
+                  controller.setWaitingForBgMusic(false);
                   cleanAudio();
                 });
-              case 12:
+              case 14:
               case "end":
                 return _context.stop();
             }

package/lib/Player/typings.d.ts

@@ -37,6 +37,13 @@ export interface PlayerConfigs {
     waveStaticPrefix?: string;
     onAvatarClick?: () => any;
     onWaveClick?: () => any;
+    /**
+     * 是否等待背景音乐加载完成后再播放
+     * - true: 等待音频完全可播放（canplaythrough）后再播放，确保不会卡顿
+     * - false: 立即播放，边加载边播放（默认行为）
+     * @default false
+     */
+    waitForBgMusicLoaded?: boolean;
 }
 export type AppSize = 'S' | 'M' | 'L' | 'XL';
 export type WaveAppearance = 'single' | 'double' | 'solid' | 'swap' | 'expand';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "2.6.2",
+  "version": "2.6.4-alpha.1",
   "type": "module",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [