@realsee/vreo 1.0.0-alpha.9 → 1.1.0-dev.0

package/CHANGELOG.md

@@ -1,9 +1,17 @@
 # CHANGELOG
+#1.0.0-alpha.21
+- fix: 多段BgMusic播放问题
+
+#1.0.0-alpha.19
+- fix: 多段BgMusic可以重复播放
+
+#1.0.0-alpha.18
+- fix: 修复无音频版本中途播放会从头开始的问题
+
 #1.0.0-alpha.1
 - feat: css样式适配: 手机横竖屏, pad, pc
 - feat: 新增两种波浪风格: 'wave' | 'solid'
 - feat: 标签调用dna插件
-- fix: 修复无音频版本中途播放会从头开始的问题
 - fix: 图片/视频 弹窗UI问题
 
 #0.2.0-alpha.25

package/README.md

@@ -15,20 +15,36 @@
 
 ## 安装说明
 
-推荐使用 `npm` 或 `yarn` 的方式进行安装。由于 `@realsee/vreo` 依赖 [Five](https://unpkg.com/@realsee/five/docs/index.html) 和 [React](https://reactjs.org/) ，请务必同时安装相关依赖：
-
-```bash
-$ npm install @realsee/vreo @realsee/five react react-dom --save
-# or
-$ yarn add @realsee/vreo @realsee/five react react-dom
-```
+ - 由于 `@realsee/vreo` 依赖 [Five](https://unpkg.com/@realsee/five/docs/index.html) 和 [React](https://reactjs.org/) ，请务必同时安装相关依赖  
+ - 根据项目的包管理器来安装：
+    ``` bash
+    # pnpm
+    pnpm install @realsee/vreo @realsee/five react react-dom --save
+    # npm
+    npm install @realsee/vreo @realsee/five react react-dom --save
+    # yarn
+    yarn add @realsee/vreo @realsee/five react react-dom
+    ```
 
 ## 快速上手
+引入样式：
 
+```css
+  /* @file xxx.css */
+  @import '@realsee/vreo/stylesheets/default.css';
+```
+或
 ```jsx
+  /* @file xxx.tsx | xxx.jsx */
+  import '@realsee/vreo/stylesheets/default.css';
+```
+examples:
+```tsx
+/* @file index.tsx | index.jsx */
 import * as React from 'react'
 import { Five } from '@realsee/five'
 import { Player } from '@realsee/vreo'
+import '@realsee/vreo/stylesheets/default.css';
 
 // 创建 Five 实例
 const five = new Five({
@@ -36,32 +52,28 @@ const five = new Five({
 })
 
 // 创建 Player 实例
-const vreoplayer = new Player(five)
+const vreoPlayer = new Player(five)
 
 // 异步请求剧本数据
 const vreoUnit = await fetch('api/**/**')
 
 // 加载剧本数据（剧本数据见下文）
-vreoplayer.load(vreoUnit)
+vreoPlayer.load(vreoUnit)
 
 // 播放
-vreoplayer.play()
+vreoPlayer.play()
 
 // 暂停
-vreoplayer.pause()
-```
-
-引入样式：
-
-```css
-@import '@realsee/vreo/stylesheets/default.css';
+vreoPlayer.pause()
 ```
 
 ## React Context & Hooks 模式使用
 
 **Vreo** 支持 [React Context](https://reactjs.org/docs/context.html) 与 [Hooks](https://reactjs.org/docs/hooks-intro.html) 相配合的模式使用，简单样例如下：
 
-```jsx
+```tsx
+/* @file App.tsx */
+
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { Five, Work, parseWork } from '@realsee/five'
@@ -78,20 +90,21 @@ const PlayButton: React.FC = () => {
   const { load, play, pause } = useVreoAction()
 
   return (
-    <button
-      onClick={async () => {
-        // 获取讲房数据
-        const vreoUnit = await fetch('api/**/**')
-        // 载入数据
-        await load(vreoUnit)
-        // 播放
-        play()
-        // 暂停
-        pause()
-      }}
-    >
-      讲解
-    </button>
+    <>
+      <button
+        onClick={async () => {
+          // 获取讲房数据
+          const vreoUnit = await fetch('api/**/**')
+          // 载入数据
+          await load(vreoUnit)
+          // 播放
+          play()
+        }}
+      >
+        讲解
+      </button>
+      <button onClick={() => pause()}>暂停</button>
+    </>
   )
 }
 
@@ -559,7 +572,4 @@ vreoplayer.load(vreoUnit, 0, true)
 
 ```
 
-
-## API 文档
-
-详细的 API 文档请参考：[Vreo API](https://realsee.js.org/vreo/index.html) 。
+Enjoy it!

package/lib/PlayController/index.js

@@ -66,7 +66,7 @@ var PlayController = /*#__PURE__*/function (_Subscribe) {
       currentKeyframes.forEach(function (keyframe) {
         if (keyframe.parsed) return;
         keyframe.parsed = true;
-        _this.emit(keyframe.type, keyframe);
+        _this.emit(keyframe.type, keyframe, _this.currentTime);
       });
     });
     return _this;

package/lib/Player/Controller.d.ts

@@ -51,12 +51,13 @@ export declare class Controller extends Subscribe<VreoKeyframeEvent> {
     get ready(): boolean;
     get currentTime(): number;
     get currentKeyframes(): VreoKeyframe[];
-    get mediaInstance(): HTMLVideoElement | HTMLAudioElement | import("../shared-utils/AduioLike").AudioLike | undefined;
+    get mediaInstance(): HTMLVideoElement | HTMLAudioElement | import("../shared-utils/AudioLike").AudioLike | undefined;
     /**
      * 逐帧任务
      */
-    requestAnimationFrameLoop(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void): void;
+    requestAnimationFrameLoop(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe, currentTime: number) => void): void;
     run(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void): void;
+    clear(): void;
     dispose(): void;
 }
 declare const ControllerContext: React.Context<Controller | null>;

package/lib/Player/Controller.js

@@ -9,6 +9,7 @@ var _five = require("@realsee/five");
 var _mobx = require("mobx");
 var React = _interopRequireWildcard(require("react"));
 var _animationFrame = require("../shared-utils/animationFrame");
+var _VreoUnit = require("../typings/VreoUnit");
 var _setElementDataset = _interopRequireDefault(require("../shared-utils/setElementDataset"));
 var _getMediaInfo = require("../shared-utils/getMediaInfo");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -72,6 +73,7 @@ var Controller = /*#__PURE__*/function (_Subscribe) {
       playing: _mobx.observable,
       setPlaying: _mobx.action,
       loading: _mobx.observable,
+      // videoAgentScene: observable.ref,
       setLoading: _mobx.action,
       popUp: _mobx.observable.ref,
       openPopUp: _mobx.action,
@@ -261,6 +263,12 @@ var Controller = /*#__PURE__*/function (_Subscribe) {
       // 没有被解析过且开始时间低于当前时间戳 100ms
       return keyframes.filter(function (keyframe) {
         if (keyframe.parsed) return false;
+        // 检测结束时间
+        if (keyframe.end < _this2.currentTime) return false;
+        // 检测开始时间
+        if (keyframe.start > _this2.currentTime) return false;
+        if (keyframe.type === _VreoUnit.VreoKeyframeEnum.BgMusic) return true;
+        // 开始时间低于当前时间戳 100ms
         var dur = _this2.currentTime - keyframe.start;
         return dur <= 100 && dur >= 0;
       });
@@ -281,10 +289,16 @@ var Controller = /*#__PURE__*/function (_Subscribe) {
       var _this$mediaInstance,
         _this$mediaInstance4,
         _this3 = this;
-      if ((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.ended) {
+      if ((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.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) {
+          return keyframe.parsed = false;
+        });
         this.setEnded(true);
         this.setPlaying(false);
         this.mediaInstance.pause();
+        this.mediaInstance.currentTime = 0;
         return;
       }
       if (!this.playing) {
@@ -302,9 +316,9 @@ var Controller = /*#__PURE__*/function (_Subscribe) {
       currentKeyframes.forEach(function (keyframe) {
         if (keyframe.parsed) return;
         keyframe.parsed = true;
-        _this3.emit(keyframe.type, keyframe);
+        _this3.emit(keyframe.type, keyframe, _this3.currentTime);
         if (callback) {
-          callback(keyframe.type, keyframe);
+          callback(keyframe.type, keyframe, _this3.currentTime);
         }
       });
     }
@@ -318,26 +332,29 @@ var Controller = /*#__PURE__*/function (_Subscribe) {
       });
     }
   }, {
-    key: "dispose",
-    value: function dispose() {
+    key: "clear",
+    value: function clear() {
+      var _this$vreoUnit2, _this$stopInterval;
       this.setPlaying(false);
-      if (this.currentKeyframes) {
-        this.currentKeyframes.forEach(function (keyframe) {
-          return keyframe.parsed = false;
-        });
-      }
+      (_this$vreoUnit2 = this.vreoUnit) === null || _this$vreoUnit2 === void 0 ? void 0 : _this$vreoUnit2.keyframes.forEach(function (keyframe) {
+        return keyframe.parsed = false;
+      });
 
       /**
        * 清理掉数据
        */
       this.vreoUnit = undefined;
       if (this.mediaInstance) {
+        this.mediaInstance.pause();
         this.mediaInstance.currentTime = 0;
       }
-      if (this.stopInterval) {
-        this.stopInterval();
-        this.stopInterval = undefined;
-      }
+      (_this$stopInterval = this.stopInterval) === null || _this$stopInterval === void 0 ? void 0 : _this$stopInterval.call(this);
+      this.stopInterval = undefined;
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this.clear();
     }
   }]);
   return Controller;

package/lib/Player/index.js

@@ -14,6 +14,7 @@ var _VreoUnit = require("../typings/VreoUnit");
 var _mobx = require("mobx");
 var _Drawer = require("./modules/Drawer");
 var _PopUp = require("./modules/PopUp");
+var _Audio = require("../shared-utils/Audio");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
@@ -123,23 +124,24 @@ var Player = /*#__PURE__*/function (_Subscribe) {
                 currentTime = _args.length > 1 && _args[1] !== undefined ? _args[1] : 0;
                 preload = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
                 force = _args.length > 3 && _args[3] !== undefined ? _args[3] : false;
+                this.controller.clear();
                 this.controller.setLoading(true);
                 if (force) {
                   vreoUnit = JSON.parse(JSON.stringify(vreoUnit));
                 }
                 if (this.controller.visible) {
-                  _context.next = 9;
+                  _context.next = 10;
                   break;
                 }
                 this.controller.setVisible(true);
                 // 延迟 500ms 规避跟 DOM 动画冲突
-                _context.next = 9;
+                _context.next = 10;
                 return new Promise(function (resolve) {
                   setTimeout(function () {
                     return resolve(true);
                   }, 500);
                 });
-              case 9:
+              case 10:
                 if (this.controller.stopInterval) {
                   this.controller.stopInterval();
                   this.controller.stopInterval = undefined;
@@ -155,7 +157,7 @@ var Player = /*#__PURE__*/function (_Subscribe) {
 
                 // 预载数据中的点位
                 if (!(preload || preload === undefined && this.configs.autoPreload)) {
-                  _context.next = 23;
+                  _context.next = 24;
                   break;
                 }
                 panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
@@ -176,18 +178,18 @@ var Player = /*#__PURE__*/function (_Subscribe) {
                 }, {});
                 panoIndexes = Object.keys(panoIndexMap);
                 i = 0;
-              case 17:
+              case 18:
                 if (!(i < panoIndexes.length)) {
-                  _context.next = 23;
+                  _context.next = 24;
                   break;
                 }
-                _context.next = 20;
+                _context.next = 21;
                 return this.$five.preloadPano(Number(panoIndexes[i]));
-              case 20:
+              case 21:
                 i++;
-                _context.next = 17;
+                _context.next = 18;
                 break;
-              case 23:
+              case 24:
                 // 新数据载入就绪
                 this.emit('loaded', vreoUnit);
                 this.controller.emit('loaded', vreoUnit);
@@ -195,17 +197,20 @@ var Player = /*#__PURE__*/function (_Subscribe) {
                   this.controller.videoAgentScene.videoAgentMesh.mediaInstance.currentTime = currentTime / 1000;
                 }
                 this.controller.setAvatar(vreoUnit.video.avatar);
-                _context.next = 29;
+                _context.next = 30;
+                return (0, _Audio.waitForBlankAudioGenerated)();
+              case 30:
+                _context.next = 32;
                 return (_this$controller$vide2 = this.controller.videoAgentScene) === null || _this$controller$vide2 === void 0 ? void 0 : _this$controller$vide2.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
-              case 29:
+              case 32:
                 this.controller.setEnded(false);
                 this.play();
                 this.controller.run(function (type, keyframe) {
-                  return _this2.emit(type, keyframe);
+                  return _this2.emit(type, keyframe, _this2.controller.currentTime);
                 });
                 this.controller.setLoading(false);
                 return _context.abrupt("return", true);
-              case 34:
+              case 37:
               case "end":
                 return _context.stop();
             }
@@ -225,6 +230,7 @@ var Player = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "play",
     value: function play(currentTime) {
+      var _this$controller$vreo;
       if (this.controller.playing) return true;
       if (currentTime && this.controller.mediaInstance) {
         this.controller.mediaInstance.currentTime = currentTime / 1000;
@@ -232,7 +238,13 @@ var Player = /*#__PURE__*/function (_Subscribe) {
       Object.assign(window, {
         $vreoController: this.controller
       });
+      this.controller.setEnded(false);
       this.controller.setPlaying(true);
+      (_this$controller$vreo = this.controller.vreoUnit) === null || _this$controller$vreo === void 0 ? void 0 : _this$controller$vreo.keyframes.forEach(function (keyframe) {
+        if (keyframe.type === _VreoUnit.VreoKeyframeEnum.BgMusic) {
+          keyframe.parsed = false;
+        }
+      });
       return true;
     }
   }, {
@@ -263,7 +275,6 @@ var Player = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "dispose",
     value: function dispose() {
-      this.pause();
       this.controller.dispose();
       if (this.configs.container) {
         ReactDOM.unmountComponentAtNode(this.configs.container);
@@ -273,4 +284,4 @@ var Player = /*#__PURE__*/function (_Subscribe) {
   return Player;
 }(_five.Subscribe);
 exports.Player = Player;
-console.log("\n\n\u250F\u2501\u2501\u2501\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250F\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n\u2503\u250F\u2501\u2513\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2503\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n\u2503\u2517\u2501\u251B\u2503\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u2501\u2503\u2503\u2501\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\n\u2503\u250F\u2513\u250F\u251B\u2503\u250F\u2513\u2503\u2517\u2501\u2513\u2503\u2501\u2503\u2503\u2501\u2503\u2501\u2501\u252B\u2503\u250F\u2513\u2503\u2503\u250F\u2513\u2503\n\u2503\u2503\u2503\u2517\u2513\u2503\u2503\u2501\u252B\u2503\u2517\u251B\u2517\u2513\u2503\u2517\u2513\u2523\u2501\u2501\u2503\u2503\u2503\u2501\u252B\u2503\u2503\u2501\u252B\n\u2517\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u2501\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n\n");
+console.log("\n    \u250F\u2501\u2501\u2501\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250F\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2503\u250F\u2501\u2513\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2503\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2503\u2517\u2501\u251B\u2503\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u2501\u2503\u2503\u2501\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\n    \u2503\u250F\u2513\u250F\u251B\u2503\u250F\u2513\u2503\u2517\u2501\u2513\u2503\u2501\u2503\u2503\u2501\u2503\u2501\u2501\u252B\u2503\u250F\u2513\u2503\u2503\u250F\u2513\u2503\n    \u2503\u2503\u2503\u2517\u2513\u2503\u2503\u2501\u252B\u2503\u2517\u251B\u2517\u2513\u2503\u2517\u2513\u2523\u2501\u2501\u2503\u2503\u2503\u2501\u252B\u2503\u2503\u2501\u252B\n    \u2517\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u2501\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\n    \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");

package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import AudioLike from '../../../shared-utils/AduioLike';
+import AudioLike from '../../../shared-utils/AudioLike';
 export interface VideoAgentMeshOptions {
     /**
      * 自定义视频实例。
@@ -40,7 +40,7 @@ export declare class VideoAgentMesh extends THREE.Mesh {
     private update;
     play(videoUrl?: string, currentTime?: number, duration?: number): Promise<unknown>;
     /**
-     * 转成毫秒，保障精准度
+     * 秒转成毫秒，保障精准度
      */
     get currentTime(): number;
     dispose(): void;

package/lib/Player/modules/VideoAgent/VideoAgentMesh.js

@@ -8,7 +8,7 @@ exports.VideoAgentMesh = void 0;
 var THREE = _interopRequireWildcard(require("three"));
 var _Preloader = require("../../../shared-utils/Preloader");
 var _mobx = require("mobx");
-var _AduioLike = _interopRequireDefault(require("../../../shared-utils/AduioLike"));
+var _AudioLike = _interopRequireDefault(require("../../../shared-utils/AudioLike"));
 var _getMediaInfo = require("../../../shared-utils/getMediaInfo");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -46,7 +46,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
    * @param options
    */
   function VideoAgentMesh(width, height, widthSegments, heightSegments) {
-    var _this$options$videoIn, _this$options$videoIn2, _this$options$videoIn3;
+    var _this$options$videoIn, _this$options$videoIn2;
     var _this;
     var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
       preload: true
@@ -103,7 +103,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     } else {
       _this.audioInstance = options.audioInstance;
     }
-    _this.audioLikeInstance = new _AduioLike["default"]();
+    _this.audioLikeInstance = new _AudioLike["default"]();
     (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
       paused: _mobx.observable
     });
@@ -118,25 +118,20 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     var onPlay = function onPlay() {
       return updatePaused(false);
     };
-    var onEnded = function onEnded() {
-      return console.log('vreo: video 播放结束');
-    };
     _this.audioInstance.addEventListener('pause', onPause);
     _this.audioInstance.addEventListener('play', onPlay);
     (_this$options$videoIn = _this.options.videoInstance) === null || _this$options$videoIn === void 0 ? void 0 : _this$options$videoIn.addEventListener('pause', onPause);
     (_this$options$videoIn2 = _this.options.videoInstance) === null || _this$options$videoIn2 === void 0 ? void 0 : _this$options$videoIn2.addEventListener('play', onPlay);
     _this.audioLikeInstance.addEventListener('pause', onPause);
     _this.audioLikeInstance.addEventListener('play', onPlay);
-    (_this$options$videoIn3 = _this.options.videoInstance) === null || _this$options$videoIn3 === void 0 ? void 0 : _this$options$videoIn3.addEventListener('ended', onEnded);
     _this.$removeEventListener = function () {
-      var _this$options$videoIn4, _this$options$videoIn5, _this$options$videoIn6;
+      var _this$options$videoIn3, _this$options$videoIn4;
       _this.audioInstance.removeEventListener('pause', onPause);
       _this.audioInstance.removeEventListener('play', onPlay);
-      (_this$options$videoIn4 = _this.options.videoInstance) === null || _this$options$videoIn4 === void 0 ? void 0 : _this$options$videoIn4.removeEventListener('pause', onPause);
-      (_this$options$videoIn5 = _this.options.videoInstance) === null || _this$options$videoIn5 === void 0 ? void 0 : _this$options$videoIn5.removeEventListener('play', onPlay);
+      (_this$options$videoIn3 = _this.options.videoInstance) === null || _this$options$videoIn3 === void 0 ? void 0 : _this$options$videoIn3.removeEventListener('pause', onPause);
+      (_this$options$videoIn4 = _this.options.videoInstance) === null || _this$options$videoIn4 === void 0 ? void 0 : _this$options$videoIn4.removeEventListener('play', onPlay);
       _this.audioLikeInstance.removeEventListener('pause', onPause);
       _this.audioLikeInstance.removeEventListener('play', onPlay);
-      (_this$options$videoIn6 = _this.options.videoInstance) === null || _this$options$videoIn6 === void 0 ? void 0 : _this$options$videoIn6.removeEventListener('ended', onEnded);
     };
     return _this;
   }
@@ -320,7 +315,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
       return play;
     }()
     /**
-     * 转成毫秒，保障精准度
+     * 秒转成毫秒，保障精准度
      */
   }, {
     key: "currentTime",

package/lib/Player/modules/VideoAgent/index.js

@@ -24,7 +24,7 @@ function VideoAgent(props) {
     var _controller$videoAgen;
     if (showAvatar) return false;
     return ((_controller$videoAgen = controller.videoAgentScene) === null || _controller$videoAgen === void 0 ? void 0 : _controller$videoAgen.videoAgentMesh.mediaInstance) instanceof HTMLVideoElement;
-  }, [controller.videoAgentScene]);
+  }, [controller.videoAgentScene, showAvatar]);
   React.useEffect(function () {
     if (!ref.current) throw new Error('React 渲染异常，请稍后重试 ...');
     if (controller.videoAgentScene) {