@realsee/vreo 0.2.0-alpha.1 → 0.2.0-alpha.10

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

@@ -22,42 +22,49 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function UpdateVRPanorama() {
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
-  var rawRef = React.useRef(null);
-  var workRef = React.useRef(null);
+  var deafultWorkRef = React.useRef(null);
+  var updateWorkRef = React.useRef(null); // 恢复默认 VR
+
   var restoreCallback = React.useCallback(function () {
-    if (rawRef.current) {
-      var work = (0, _five.parseWork)(rawRef.current);
+    // 先清理掉 之前的 VR 数据备份
+    updateWorkRef.current = null;
+
+    if (deafultWorkRef.current) {
+      var work = (0, _five.parseWork)(deafultWorkRef.current);
       five.load(work);
     }
+  }, []); // 暂停时： 恢复默认 VR 
 
-    workRef.current = null;
-  }, []);
   var pausedCallback = React.useCallback(function () {
-    if (rawRef.current) {
-      var work = (0, _five.parseWork)(rawRef.current);
+    if (deafultWorkRef.current) {
+      var work = (0, _five.parseWork)(deafultWorkRef.current);
+      Object.assign(window, {
+        $rawWork: work
+      });
       five.load(work);
     }
-  }, []);
+  }, []); // 播放时：如果暂停前有更新 VR 需要还原
+
   var playingCallback = React.useCallback(function () {
-    if (!workRef.current) {
+    if (!updateWorkRef.current) {
       return;
     }
 
-    five.load(workRef.current);
+    five.load(updateWorkRef.current);
   }, []);
   React.useEffect(function () {
     var callback = function callback(keyframe) {
       var _five$work;
 
-      if (!rawRef.current) {
-        rawRef.current = five.work.raw.works;
+      if (!deafultWorkRef.current) {
+        deafultWorkRef.current = five.work.raw.works;
       }
 
       var data = keyframe.data; // 如果数据中有新 work 数据，则直接载入
 
       if (data.work) {
-        workRef.current = (0, _five.parseWork)(data.work);
-        five.load(workRef.current);
+        updateWorkRef.current = (0, _five.parseWork)(data.work);
+        five.load(updateWorkRef.current);
         return;
       }
 
@@ -72,8 +79,13 @@ function UpdateVRPanorama() {
         delete data.dynamic_scene;
       }
 
-      workRef.current = (0, _five.parseWork)([lastRawWork, data]);
-      five.load(workRef.current);
+      Object.assign(window, {
+        $work1: JSON.parse(lastRawWork),
+        $work2: data,
+        parseWork: _five.parseWork
+      });
+      updateWorkRef.current = (0, _five.parseWork)([lastRawWork, data]);
+      five.load(updateWorkRef.current);
     };
 
     controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback); // 离开 将之前的内容清空
@@ -93,6 +105,6 @@ function UpdateVRPanorama() {
       controller.off('paused', pausedCallback);
       controller.off('playing', playingCallback);
     };
-  }, [controller]);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }

package/lib/Player/typings.d.ts

@@ -1,5 +1,7 @@
-import { ReactNode } from 'react';
-import { VreoKeyframeConfigMap } from '../typings/VreoUnit';
+import React, { ReactNode } from 'react';
+import { Subscribe, Five } from '@realsee/five';
+import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit';
+import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 export interface PlayerConfigs {
     containter?: ReactDOM.Container;
     keyframeMap: VreoKeyframeConfigMap;
@@ -12,8 +14,19 @@ export interface PlayerConfigs {
         videoEffect?: HTMLVideoElement;
         modelTVVideo?: HTMLVideoElement;
     };
+    videoAgentMeshOptions?: VideoAgentMeshOptions;
     /**
      * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
      */
     customPanelChildren?: ReactNode;
+    customKeyframes?: React.FC<CustomVreoKeyframeProps>[];
+    imageOptions?: {
+        size: number;
+    };
+    autoPreload?: boolean;
+}
+export declare type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
+export interface CustomVreoKeyframeProps {
+    subscribe: VreoSubscribe;
+    five: Five;
 }

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -54,112 +54,125 @@ function progressNumber(from, to, pst) {
 
 
 var CameraMovementPlugin = function CameraMovementPlugin(five) {
-  var move = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(args, duration) {
-      var opts,
-          _args = arguments;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              opts = _args.length > 2 && _args[2] !== undefined ? _args[2] : {
-                preload: true
-              };
+  var move = function move(args, duration) {
+    var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+      preload: true
+    };
+    return new Promise( /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(resolve, reject) {
+        var panoIndex, movePanoOptions;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (opts.asyncStartCallback) {
+                  opts.asyncStartCallback();
+                }
 
-              if (opts.asyncStartCallback) {
-                opts.asyncStartCallback();
-              }
+                if (!(five.panoIndex === undefined)) {
+                  _context.next = 3;
+                  break;
+                }
 
-              if (!(args.mode && args.mode !== five.currentMode)) {
-                _context.next = 5;
-                break;
-              }
+                return _context.abrupt("return", reject(false));
 
-              _context.next = 5;
-              return new Promise(function (resolve) {
-                if (!args.mode) return;
-                five.once('modeChange', function (mode) {
-                  five.once('initAnimationEnded', function () {
-                    if (mode === args.mode) {
-                      resolve(true);
-                    }
+              case 3:
+                if (!(args.mode && args.mode !== five.currentMode)) {
+                  _context.next = 6;
+                  break;
+                }
+
+                _context.next = 6;
+                return new Promise(function (resolve) {
+                  if (!args.mode) return;
+                  five.once('modeChange', function (mode) {
+                    five.once('initAnimationEnded', function () {
+                      if (mode === args.mode) {
+                        resolve(true);
+                      }
+                    });
+                  });
+                  five.changeMode(args.mode, {
+                    fov: args.fov || undefined,
+                    latitude: args.latitude || undefined,
+                    longitude: args.longitude || undefined,
+                    panoIndex: args.panoIndex || undefined
                   });
                 });
-                five.changeMode(args.mode, {
-                  fov: args.fov || undefined,
-                  latitude: args.latitude || undefined,
-                  longitude: args.longitude || undefined,
-                  panoIndex: args.panoIndex || undefined
-                });
-              });
 
-            case 5:
-              if (!(args.mode === _five.Five.Mode.Floorplan)) {
-                _context.next = 7;
-                break;
-              }
+              case 6:
+                if (!(args.mode === _five.Five.Mode.Floorplan)) {
+                  _context.next = 8;
+                  break;
+                }
 
-              return _context.abrupt("return", true);
+                return _context.abrupt("return", resolve(true));
 
-            case 7:
-              if (!(opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
-                _context.next = 10;
-                break;
-              }
+              case 8:
+                if (!(opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
+                  _context.next = 11;
+                  break;
+                }
 
-              _context.next = 10;
-              return five.preloadPano(args.panoIndex);
+                _context.next = 11;
+                return five.preloadPano(args.panoIndex);
 
-            case 10:
-              if (opts.asyncEndCallback) {
-                opts.asyncEndCallback();
-              }
+              case 11:
+                if (opts.asyncEndCallback) {
+                  opts.asyncEndCallback();
+                }
 
-              if (!(args.panoIndex === undefined && args.fov === undefined && args.latitude === undefined && args.longitude === undefined)) {
-                _context.next = 13;
-                break;
-              }
+                if (!(args.panoIndex === undefined && args.fov === undefined && args.latitude === undefined && args.longitude === undefined)) {
+                  _context.next = 14;
+                  break;
+                }
 
-              return _context.abrupt("return", true);
+                return _context.abrupt("return", resolve(true));
 
-            case 13:
-              _context.next = 15;
-              return new Promise(function (resolve, reject) {
-                var panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
-
-                if (panoIndex !== undefined) {
-                  five.moveToPano(panoIndex, Object.assign({
-                    duration: duration,
-                    // 移动耗时
-                    moveEndCallback: function moveEndCallback() {
-                      return resolve(true);
-                    },
-                    // 移动结束
-                    moveCancelCallback: function moveCancelCallback() {
-                      return reject(false);
-                    } // 移动开始
-
-                  }, args));
-                } else {
-                  reject(false);
+              case 14:
+                panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
+
+                if (!(panoIndex !== undefined)) {
+                  _context.next = 21;
+                  break;
                 }
-              });
 
-            case 15:
-              return _context.abrupt("return", _context.sent);
+                movePanoOptions = Object.assign(args, {
+                  duration: duration,
+                  // 移动耗时
+                  moveEndCallback: function moveEndCallback() {
+                    return resolve(true);
+                  },
+                  // 移动结束
+                  moveCancelCallback: function moveCancelCallback() {
+                    resolve(true);
+                  } // 移动开始
+                  // effect: args.transEffect || 'fade',
 
-            case 16:
-            case "end":
-              return _context.stop();
+                });
+                _context.next = 19;
+                return five.moveToPano(panoIndex, movePanoOptions);
+
+              case 19:
+                _context.next = 22;
+                break;
+
+              case 21:
+                reject(false);
+
+              case 22:
+              case "end":
+                return _context.stop();
+            }
           }
-        }
-      }, _callee);
-    }));
+        }, _callee);
+      }));
 
-    return function move(_x, _x2) {
-      return _ref.apply(this, arguments);
-    };
-  }();
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  };
 
   var getAnimeParams = function getAnimeParams(args) {
     var currentFiveState = five.state; // latitude
@@ -239,8 +252,9 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                   // 移动结束
                   moveCancelCallback: function moveCancelCallback() {
                     return reject(false);
-                  } // 移动开始
-
+                  },
+                  // 移动开始
+                  effect: 'fade'
                 });
               });
 

package/lib/fivePlugins/CameraMovementPlugin/typings.d.ts

@@ -33,6 +33,7 @@ export interface CameraMovementOptsCallback {
 export declare type MoveArgs = {
     mode: Mode;
     panoIndex: number;
+    transEffect?: "fly" | "fade" | "instant";
 } & Pose;
 export declare type MoveOpts = {
     preload?: boolean;

package/lib/react/index.d.ts

@@ -1,14 +1,22 @@
 import * as React from 'react';
+import { PlayerConfigs } from '../Player/typings';
 import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit';
-export declare const VreoProvider: React.FC;
+export interface VreoProviderProps {
+    configs?: Partial<PlayerConfigs>;
+}
+export declare const VreoProvider: React.FC<VreoProviderProps>;
 /**
  * VreoPlayer 命令集合。
  */
 export interface VreoActionCallbacks {
     /**
      * 载入剧本数据。
+     * @param vreoUnit 剧本数据
+     * @param currentTime 开始时间戳
+     * @param preload 是否开启预载
+     * @param force 是否强制载入
      */
-    load: (vreoUnit: VreoUnit, currentTime?: number) => Promise<boolean>;
+    load: (vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean) => Promise<boolean>;
     /**
      * 播放。
      */

package/lib/react/index.js

@@ -44,7 +44,7 @@ var VreoProvider = function VreoProvider(props) {
 
   var playerRef = React.useRef(null);
   React.useEffect(function () {
-    playerRef.current = new _Player.Player(five);
+    playerRef.current = new _Player.Player(five, props.configs || {});
     setPlayer(playerRef.current);
     return function () {
       var _playerRef$current;

package/lib/shared-utils/createTransMatrix.d.ts

@@ -0,0 +1 @@
+export declare function createTransMatrix(arr1: number[]): (arr2: number[]) => number[];

package/lib/shared-utils/createTransMatrix.js

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTransMatrix = createTransMatrix;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+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 _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function createTransMatrix(arr1) {
+  var matrix4 = new THREE.Matrix4();
+  matrix4.fromArray(arr1);
+  return function (arr2) {
+    var vector3 = _construct(THREE.Vector3, _toConsumableArray(arr2));
+
+    vector3.applyMatrix4(matrix4);
+    return vector3.toArray();
+  };
+}

package/lib/typings/VreoUnit.d.ts

@@ -61,7 +61,7 @@ export declare type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
-    uuid: string;
+    uuid?: string;
     type: VreoKeyframeEnum;
     start: number;
     end: number;
@@ -95,14 +95,16 @@ export declare type VreoKeyframeEvent = {
     [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void;
 } & {
     loaded: (vreoUnit: VreoUnit) => void;
-    paused: () => void;
+    paused: (ended?: boolean) => void;
     playing: () => void;
+    unknownKeyframeType: (keyframe: Record<string, any>) => void;
 };
 /**
  * 相机运动
  */
 export declare type CameraMovementData = {
-    effect: CameraMovementEffect;
+    effect?: CameraMovementEffect;
+    transEffect?: "fly" | "fade" | "instant";
     mode: Mode;
     panoIndex: number;
     loop?: boolean;
@@ -145,9 +147,13 @@ export interface Vertex {
     z: number;
 }
 /**
- * 四个顶点元组
+ * 矩形顶点
  */
 export declare type QuadrangleVertexs = [Vertex, Vertex, Vertex, Vertex];
+/**
+ * 顶点数组
+ */
+export declare type Vertexs = Vertex[];
 /**
  * 视频广告
  */
@@ -163,7 +169,8 @@ export declare type ModelVideoData = {
     /**
      * 视频映射在模型中的顶点
      */
-    vertexs: QuadrangleVertexs;
+    vertexs: QuadrangleVertexs | Vertexs;
+    matrixWorld?: number[];
 };
 /**
  * 全景文本标签
@@ -209,13 +216,18 @@ export declare enum InfoPanelTypeEnum {
     Image = "Image",
     Video = "Video"
 }
+export declare enum InfoPanelStyleEnum {
+    Drawer = "Drawer",
+    PopUp = "PopUp"
+}
 /**
  * 信息面板
  */
 export declare type InfoPanelData = {
     type: InfoPanelTypeEnum;
+    style?: InfoPanelStyleEnum;
     url: string;
-    tilte?: string;
+    title?: string;
     subTitle?: string;
 };
 /**

package/lib/typings/VreoUnit.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = void 0;
+exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = exports.InfoPanelStyleEnum = void 0;
 var VreoKeyframeEnum;
 /**
  * 支持自定义剧本关键帧配置项
@@ -55,13 +55,21 @@ exports.PanoEffectEnum = PanoEffectEnum;
  * 信息面板类型枚举
  */
 var InfoPanelTypeEnum;
-/**
- * 信息面板
- */
-
 exports.InfoPanelTypeEnum = InfoPanelTypeEnum;
 
 (function (InfoPanelTypeEnum) {
   InfoPanelTypeEnum["Image"] = "Image";
   InfoPanelTypeEnum["Video"] = "Video";
-})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
+})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
+
+var InfoPanelStyleEnum;
+/**
+ * 信息面板
+ */
+
+exports.InfoPanelStyleEnum = InfoPanelStyleEnum;
+
+(function (InfoPanelStyleEnum) {
+  InfoPanelStyleEnum["Drawer"] = "Drawer";
+  InfoPanelStyleEnum["PopUp"] = "PopUp";
+})(InfoPanelStyleEnum || (exports.InfoPanelStyleEnum = InfoPanelStyleEnum = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.1",
+  "version": "0.2.0-alpha.10",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -18,7 +18,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "dev": "vite --port=3088",
+    "dev": "vite --port=3088 --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "docs": "npx typedoc",
@@ -35,6 +35,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
+    "@realsee/dnalogel": "^0.1.7-alpha.10",
     "@realsee/five": "^5.0.0-alpha.103",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
@@ -53,7 +54,6 @@
     "@tweenjs/tween.js": "18.6.4",
     "classnames": "^2.3.1",
     "mobx": "^6.3.7",
-    "mobx-react": "^7.2.1",
-    "react-transition-group": "^4.4.2"
+    "mobx-react": "^7.2.1"
   }
 }

package/resources/PlayController/createHTMLAudioElement.ts

@@ -0,0 +1,53 @@
+
+const BLANK_AUDIO = ''
++ 'data:audio/mpeg;base64,'
++ '//uQxAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAADAAAGhgBVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVWqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr///////////'
++ '////////////////////////////////8AAAA5TEFNRTMuOThyAc0AAAAAAAAAABSAJAiqQgAAg'
++ 'AAABobxtI73AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
++ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//uQxAACFEII9ACZ/sJZwWEoEb8w/////N//////Jcxj'
++ 'Hjf+7/v/H2PzCCFAiDtGeyBCIx7bJJ1mmEEMy6g8mm2c8nrGABB4h2Mkmn//4z/73u773R5qHHu'
++ '/j/w7Kxkzh5lWRWdsifCkNAnY9Zc1HvDAhjhSHdFkHFzLmabt/AQxSg2wwzLhHIJOBnAWwVY4zr'
++ 'hIYhhc2kvhYDfQ4hDi2Gmh5KyFn8EcGIrHAngNgIwVIEMf5bzbAiTRoAD///8z/KVhkkWEle6IX'
++ '+d/z4fvH3BShK1e5kmjkCMoxVmXhd4ROlTKo3iipasvTilY21q19ta30/v/0/idPX1v8PNxJL6r'
++ 'amnOVsdvMv2akO0iSYIzdJFirtzWXCZicS9vHqvSKyqm5XJBdqBwPxyfJdykhWTZ0G0ZyTZGpLK'
++ 'xsNwwoRhsx3tZfhwmeOBVISm3impAC/IT/8hP/EKEM1KMdVdVKM2rHV4x7HVXZvbVVKN/qq8CiV'
++ '9VL9jjH/6l6qf7MBCjZmOqsAibjcP+qqqv0oxqpa/NVW286hPo1nz2L/h8+jXt//uSxCmDU2IK/'
++ 'ECN98KKtE5IYzNoCfbw+u9i5r8PoadUMFPKqWL4LK3T/LCraMSHGkW4bpLXR/E6LlHOVQxmslKV'
++ 'J8IULktMN06N0FKCpHCoYsjC4F+Z0NVqdNFoGSTjSiyjzLdnZ2fNqTi2eHKONONKLMPMKLONKLM'
++ 'PQRJGlFxZRoKcJFAYEeIFiRQkUWUeYfef//Ko04soswso40UJAgMw8wosososy0EalnZyjQUGBR'
++ 'QGIFggOWUacWUeYmuadrZziQKKEgQsQLAhQkUJAgMQDghltLO1onp0cpkNInSFMqlYeSEJ5AHsq'
++ 'FdOwy1DA2sRmRJKxdKRfLhfLw5BzUxBTUUzLjk4LjJVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVUxBTUUzLjk4LjJVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVf/7ksRRA8AAAaQAAAAgAAA0gAAABFVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'
++ 'VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU=';
+
+
+export function createHTMLAudioElement(): HTMLAudioElement {
+  const ndAudio = document.querySelector('#vreo-playController-audio')
+  if (ndAudio) {
+    return ndAudio as HTMLAudioElement
+  }
+
+  const audio = document.createElement('audio')
+  audio.style.display = 'none'
+  audio.setAttribute('id', 'vreo-playController-audio')
+  audio.controls = false
+  document.body.appendChild(audio)
+  audio.src = BLANK_AUDIO
+
+  // 触发一次播放
+  Promise.resolve(async () => await audio.play())
+
+  return audio
+}