@galacean/effects-plugin-multimedia 2.6.6 → 2.7.0-alpha.0

package/dist/audio/audio-component.d.ts

@@ -1,9 +1,12 @@
 import { RendererComponent, spec } from '@galacean/effects';
 import { AudioPlayer } from './audio-player';
+/**
+ * Audio component class
+ */
 export declare class AudioComponent extends RendererComponent {
     audioPlayer: AudioPlayer;
-    private isVideoPlay;
-    private threshold;
+    private isPlaying;
+    onAwake(): void;
     onUpdate(dt: number): void;
     fromData(data: spec.AudioComponentData): void;
     /**

package/dist/audio/audio-player.d.ts

@@ -13,6 +13,7 @@ export declare class AudioPlayer {
     private engine;
     audio?: HTMLAudioElement;
     audioSourceInfo: AudioSourceInfo;
+    private pendingOffset;
     private isSupportAudioContext;
     private options;
     private destroyed;
@@ -26,6 +27,15 @@ export declare class AudioPlayer {
      */
     setAudioSource(audio: AudioBuffer | HTMLAudioElement): void;
     getCurrentTime(): number;
+    /**
+     * 设置音频当前时间
+     * WebAudio下设置 this.pendingOffset，后面play时直接从该事件play
+     * HTMLAudioElement下直接设置时间
+     */
+    setCurrentTime(time: number): void;
+    /**
+     * 播放音频
+     */
     play(): void;
     pause(): void;
     setVolume(volume: number): void;

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects player multimedia plugin
  * Author: Ant Group CO., Ltd.
  * Contributors: 云垣
- * Version: v2.6.6
+ * Version: v2.7.0-alpha.0
  */
 
 'use strict';
@@ -502,11 +502,11 @@ var MultimediaError = /*#__PURE__*/ function(Error1) {
 }(EFFECTS.AbstractPlugin);
 
 var seed = 0;
-exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
-    _inherits(VideoComponent, BaseRenderComponent);
+exports.VideoComponent = /*#__PURE__*/ function(MaskableGraphic) {
+    _inherits(VideoComponent, MaskableGraphic);
     function VideoComponent(engine) {
         var _this;
-        _this = BaseRenderComponent.call(this, engine) || this;
+        _this = MaskableGraphic.call(this, engine) || this;
         _this.threshold = 0.03;
         /**
    * 播放标志位
@@ -582,27 +582,16 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
     _proto.onAwake = function onAwake() {
         var _this = this;
         var _this_item_composition, _this_item_composition1;
-        BaseRenderComponent.prototype.onAwake.call(this);
+        MaskableGraphic.prototype.onAwake.call(this);
         (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.on("goto", function(option) {
-            if (option.time > 0) {
-                var _this_item = _this.item, endBehavior = _this_item.endBehavior, start = _this_item.start, duration = _this_item.duration;
-                if (endBehavior === EFFECTS.spec.EndBehavior.freeze || endBehavior === EFFECTS.spec.EndBehavior.restart) {
-                    _this.setCurrentTime((option.time - start) % duration);
-                } else {
-                    if (option.time >= duration) {
-                        _this.onDisable();
-                    } else {
-                        _this.setCurrentTime(option.time - start);
-                    }
-                }
-            }
+            _this.setCurrentTime(_this.item.time);
         });
         (_this_item_composition1 = this.item.composition) == null ? void 0 : _this_item_composition1.on("pause", function() {
             _this.pauseVideo();
         });
     };
     _proto.fromData = function fromData(data) {
-        BaseRenderComponent.prototype.fromData.call(this, data);
+        MaskableGraphic.prototype.fromData.call(this, data);
         var interaction = data.interaction, options = data.options;
         var video = options.video, _options_startColor = options.startColor, startColor = _options_startColor === void 0 ? [
             1,
@@ -635,20 +624,21 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         this.material.setColor("_Color", new EFFECTS.math.Color().setFromArray(startColor));
     };
     _proto.render = function render(renderer) {
-        BaseRenderComponent.prototype.render.call(this, renderer);
+        MaskableGraphic.prototype.render.call(this, renderer);
         this.renderer.texture.uploadCurrentVideoFrame();
     };
     _proto.onUpdate = function onUpdate(dt) {
-        BaseRenderComponent.prototype.onUpdate.call(this, dt);
-        var _this_item = this.item, time = _this_item.time, duration = _this_item.duration, endBehavior = _this_item.endBehavior, composition = _this_item.composition, start = _this_item.start;
+        MaskableGraphic.prototype.onUpdate.call(this, dt);
+        var _this_item = this.item, time = _this_item.time, duration = _this_item.duration, endBehavior = _this_item.endBehavior, composition = _this_item.composition;
         EFFECTS.assertExist(composition);
         var _composition_rootItem = composition.rootItem, rootEndBehavior = _composition_rootItem.endBehavior, rootDuration = _composition_rootItem.duration;
-        var isEnd = time === 0 || time === rootDuration - start || Math.abs(rootDuration - duration - time) < 1e-10 || Math.abs(time - duration) < this.threshold;
+        var isEnd = time === 0 || time === rootDuration || Math.abs(rootDuration - duration - time) < 1e-10 || Math.abs(time - duration) < this.threshold;
         if (time > 0 && !isEnd) {
             this.setVisible(true);
             this.playVideo();
         }
-        if (time === 0 || time === rootDuration - start || Math.abs(rootDuration - duration - time) < 1e-10) {
+        this.renderer.texture.uploadCurrentVideoFrame();
+        if (time === 0 || time === rootDuration || Math.abs(rootDuration - duration - time) < 1e-10) {
             if (rootEndBehavior === EFFECTS.spec.EndBehavior.freeze) {
                 var _this_video;
                 if (!((_this_video = this.video) == null ? void 0 : _this_video.paused)) {
@@ -777,7 +767,7 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         this.video.pause();
     };
     _proto.onDestroy = function onDestroy() {
-        BaseRenderComponent.prototype.onDestroy.call(this);
+        MaskableGraphic.prototype.onDestroy.call(this);
         this.played = false;
         this.isPlayLoading = false;
         this.pendingPause = false;
@@ -789,7 +779,7 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
     };
     _proto.onDisable = function onDisable() {
         var _this_item;
-        BaseRenderComponent.prototype.onDisable.call(this);
+        MaskableGraphic.prototype.onDisable.call(this);
         this.isVideoActive = false;
         this.pauseVideo();
         var endBehavior = (_this_item = this.item) == null ? void 0 : _this_item.endBehavior;
@@ -798,12 +788,12 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         }
     };
     _proto.onEnable = function onEnable() {
-        BaseRenderComponent.prototype.onEnable.call(this);
+        MaskableGraphic.prototype.onEnable.call(this);
         this.isVideoActive = true;
         this.playVideo();
     };
     return VideoComponent;
-}(EFFECTS.BaseRenderComponent);
+}(EFFECTS.MaskableGraphic);
 exports.VideoComponent = __decorate([
     EFFECTS.effectsClass(EFFECTS.spec.DataType.VideoComponent)
 ], exports.VideoComponent);
@@ -812,6 +802,7 @@ var AudioPlayer = /*#__PURE__*/ function() {
     function AudioPlayer(engine, audio) {
         this.engine = engine;
         this.audioSourceInfo = {};
+        this.pendingOffset = 0;
         this.isSupportAudioContext = !!window["AudioContext"];
         this.options = {
             endBehavior: EFFECTS.spec.EndBehavior.destroy,
@@ -861,30 +852,83 @@ var AudioPlayer = /*#__PURE__*/ function() {
             return ((_this_audio = this.audio) == null ? void 0 : _this_audio.currentTime) || 0;
         }
     };
-    _proto.play = function play() {
+    /**
+   * 设置音频当前时间
+   * WebAudio下设置 this.pendingOffset，后面play时直接从该事件play
+   * HTMLAudioElement下直接设置时间
+   */ _proto.setCurrentTime = function setCurrentTime(time) {
+        var t = Math.max(0, time);
+        if (this.isSupportAudioContext) {
+            var upper = this.options.duration && this.options.duration > 0 ? this.options.duration : undefined;
+            this.pendingOffset = upper ? Math.min(t, upper) : t;
+            return;
+        } else {
+            if (this.audio) {
+                var dur = Number.isFinite(this.audio.duration) ? this.audio.duration : undefined;
+                var clamped = dur ? Math.min(t, dur) : t;
+                this.audio.currentTime = clamped;
+            }
+        }
+    };
+    /**
+   * 播放音频
+   */ _proto.play = function play() {
         var _this = this;
         if (this.isSupportAudioContext) {
-            var _this_audioSourceInfo = this.audioSourceInfo, audioContext = _this_audioSourceInfo.audioContext, source = _this_audioSourceInfo.source;
-            if (source && audioContext) {
-                switch(this.options.endBehavior){
-                    case EFFECTS.spec.EndBehavior.destroy:
-                    case EFFECTS.spec.EndBehavior.freeze:
-                        source.start(0);
-                        break;
-                    case EFFECTS.spec.EndBehavior.restart:
-                        source.loop = true;
-                        source.loopStart = 0;
-                        source.loopEnd = this.options.duration;
-                        source.start(0);
-                        break;
-                }
+            var _this_audioSourceInfo = this.audioSourceInfo, audioContext = _this_audioSourceInfo.audioContext, source = _this_audioSourceInfo.source, gainNode = _this_audioSourceInfo.gainNode;
+            if (!audioContext || !gainNode) {
+                return;
+            }
+            var buffer = source == null ? void 0 : source.buffer;
+            if (!buffer) {
+                return;
+            }
+            var maxDuration = this.options.duration && this.options.duration > 0 ? this.options.duration : buffer.duration;
+            // 保险起见，先停掉旧 source，吞掉异常（旧节点是否成功 stop 不影响后续逻辑）
+            // eslint-disable-next-line no-empty
+            try {
+                source == null ? void 0 : source.stop();
+            } catch (e) {}
+            // AudioBufferSourceNode 是一次性节点，start 后不能二次 start。无论之前是否 start 过，先调用 stop 清理旧节点。
+            var newSource = audioContext.createBufferSource();
+            newSource.buffer = buffer;
+            newSource.connect(gainNode);
+            var _source_playbackRate_value;
+            // 继承旧的播放参数
+            newSource.playbackRate.value = (_source_playbackRate_value = source == null ? void 0 : source.playbackRate.value) != null ? _source_playbackRate_value : 1;
+            if (this.options.endBehavior === EFFECTS.spec.EndBehavior.restart) {
+                newSource.loop = true;
+                newSource.loopStart = 0;
+                newSource.loopEnd = maxDuration;
+            } else {
+                var _source_loop;
+                newSource.loop = (_source_loop = source == null ? void 0 : source.loop) != null ? _source_loop : false;
+                var _source_loopStart;
+                newSource.loopStart = (_source_loopStart = source == null ? void 0 : source.loopStart) != null ? _source_loopStart : 0;
+                var _source_loopEnd;
+                newSource.loopEnd = (_source_loopEnd = source == null ? void 0 : source.loopEnd) != null ? _source_loopEnd : maxDuration;
+            }
+            this.audioSourceInfo.source = newSource;
+            if (audioContext.state === "suspended") {
+                audioContext.resume().catch(function(e) {
+                    return _this.engine.renderErrors.add(e);
+                });
+            }
+            try {
+                newSource.start(0, this.pendingOffset || 0);
+                this.pendingOffset = 0;
+                this.started = true;
+            } catch (e) {
+                this.engine.renderErrors.add(e);
             }
-            this.started = true;
         } else {
-            var _this_audio;
-            (_this_audio = this.audio) == null ? void 0 : _this_audio.play().catch(function(e) {
-                _this.engine.renderErrors.add(e);
-            });
+            if (this.audio) {
+                this.audio.loop = this.options.endBehavior === EFFECTS.spec.EndBehavior.restart;
+                this.audio.play().catch(function(e) {
+                    return _this.engine.renderErrors.add(e);
+                });
+                this.started = true;
+            }
         }
     };
     _proto.pause = function pause() {
@@ -988,27 +1032,41 @@ exports.AudioComponent = /*#__PURE__*/ function(RendererComponent) {
     function AudioComponent() {
         var _this;
         _this = RendererComponent.apply(this, arguments) || this;
-        _this.isVideoPlay = false;
-        _this.threshold = 0.03;
+        _this.isPlaying = false;
         return _this;
     }
     var _proto = AudioComponent.prototype;
+    _proto.onAwake = function onAwake() {
+        var _this = this;
+        var _this_item_composition, _this_item_composition1, _this_item_composition2;
+        RendererComponent.prototype.onAwake.call(this);
+        (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.on("play", function(option) {
+            if (_this.item.time <= 0) {
+                return;
+            }
+            _this.audioPlayer.setCurrentTime(_this.item.time);
+            _this.audioPlayer.play();
+            _this.isPlaying = true;
+        });
+        (_this_item_composition1 = this.item.composition) == null ? void 0 : _this_item_composition1.on("pause", function() {
+            _this.audioPlayer.pause();
+            _this.isPlaying = false;
+        });
+        (_this_item_composition2 = this.item.composition) == null ? void 0 : _this_item_composition2.on("goto", function(option) {
+            _this.audioPlayer.setCurrentTime(_this.item.time);
+        });
+    };
     _proto.onUpdate = function onUpdate(dt) {
         RendererComponent.prototype.onUpdate.call(this, dt);
         var _this_item = this.item, time = _this_item.time, duration = _this_item.duration, endBehavior = _this_item.endBehavior;
+        if (time > 0 && this.isPlaying == false) {
+            this.audioPlayer.play();
+            this.isPlaying = true;
+        }
         this.audioPlayer.setOptions({
             duration: duration,
             endBehavior: endBehavior
         });
-        if (time >= 0 && !this.isVideoPlay) {
-            this.audioPlayer.play();
-            this.isVideoPlay = true;
-        }
-        if (Math.abs(time - duration) < this.threshold) {
-            if (endBehavior === EFFECTS.spec.EndBehavior.destroy) {
-                this.audioPlayer.pause();
-            }
-        }
     };
     _proto.fromData = function fromData(data) {
         RendererComponent.prototype.fromData.call(this, data);
@@ -1076,7 +1134,7 @@ exports.AudioComponent = __decorate([
 
 /**
  * 插件版本号
- */ var version = "2.6.6";
+ */ var version = "2.7.0-alpha.0";
 EFFECTS.registerPlugin("video", VideoLoader, EFFECTS.VFXItem);
 EFFECTS.registerPlugin("audio", AudioLoader, EFFECTS.VFXItem);
 EFFECTS.logger.info("Plugin multimedia version: " + version + ".");