feat: follow [email protected] (AudioAsset#loopOffset)

.github/workflows/release.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - feat-loopoffset
 
 env:
   NODE_VERSION: 18

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.9.0-beta.0
+* @akashic/[email protected] に追従
+  * `AudioAsset#loopOffset` に対応
+
 ## 2.8.3
 * `MouseTouchEventHandler` において `button` の値が一部 `PointerEventHandler` と異なってしまう問題を修正
 

e2e/tests/audio/HTMLAudio.spec.ts

@@ -39,7 +39,7 @@ describe("HTMLAudio", () => {
 				const { HTMLAudioPlugin } = require("@akashic/pdi-browser") as typeof index;
 				const plugin = new HTMLAudioPlugin();
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", audioAssetPath, 100, system, false, {}, 10);
+				const asset = plugin.createAsset("id", audioAssetPath, 100, system, false, {}, 10, undefined);
 				return new Promise<AudioAsset>((resolve, reject) => {
 					const loader: AssetLoadHandler = {
 						_onAssetLoad: (asset: AudioAsset) => {
@@ -65,7 +65,7 @@ describe("HTMLAudio", () => {
 				const { HTMLAudioPlugin } = require("@akashic/pdi-browser") as typeof index;
 				const plugin = new HTMLAudioPlugin();
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", audioAssetPath + "?" + query, 100, system, false, {}, 0);
+				const asset = plugin.createAsset("id", audioAssetPath + "?" + query, 100, system, false, {}, 0, undefined);
 				return new Promise<AudioAsset>((resolve, reject) => {
 					const loader: AssetLoadHandler = {
 						_onAssetLoad: (asset: AudioAsset) => {
@@ -87,7 +87,7 @@ describe("HTMLAudio", () => {
 				const { HTMLAudioPlugin } = require("@akashic/pdi-browser") as typeof index;
 				const plugin = new HTMLAudioPlugin();
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", "not_found_audio", 100, system, false, {}, 0);
+				const asset = plugin.createAsset("id", "not_found_audio", 100, system, false, {}, 0, undefined);
 				return new Promise<AssetLoadError>((resolve, reject) => {
 					const loader: AssetLoadHandler = {
 						_onAssetLoad: (_asset: AudioAsset) => {
@@ -112,7 +112,7 @@ describe("HTMLAudio", () => {
 					const plugin = new HTMLAudioPlugin();
 					plugin.supportedFormats = [format];
 					const system = new window.__mock__.MockAudioSystem({id: "voice"});
-					const asset = plugin.createAsset("id", audioAssetPath, 100, system, false, {}, 0);
+					const asset = plugin.createAsset("id", audioAssetPath, 100, system, false, {}, 0, undefined);
 					return new Promise<AudioAsset>((resolve) => {
 						const loader: AssetLoadHandler = {
 							_onAssetLoad: (asset: AudioAsset) => {
@@ -139,7 +139,7 @@ describe("HTMLAudio", () => {
 				const plugin = new HTMLAudioPlugin();
 				plugin.supportedFormats = ["aac", "mp4"];
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", audioAsset2Path + "?" + query, 100, system, false, {}, 0);
+				const asset = plugin.createAsset("id", audioAsset2Path + "?" + query, 100, system, false, {}, 0, undefined);
 				return new Promise<AudioAsset>((resolve) => {
 					const loader: AssetLoadHandler = {
 						_onAssetLoad: (asset: AudioAsset) => {
@@ -168,7 +168,7 @@ describe("HTMLAudio", () => {
 				const plugin = new HTMLAudioPlugin();
 				plugin.supportedFormats = ["aac", "mp4"];
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", seAssetPath, 100, system, false, {}, 0);
+				const asset = plugin.createAsset("id", seAssetPath, 100, system, false, {}, 0, undefined);
 				const player = asset.play();
 				player.changeVolume(0.1);
 				return new Promise<[AudioAsset, AudioPlayer]>((resolve, reject) => {

e2e/tests/audio/WebAudio.spec.ts

@@ -39,7 +39,7 @@ describe("WebAudio", () => {
 				const { WebAudioPlugin } = require("@akashic/pdi-browser") as typeof index;
 				const plugin = new WebAudioPlugin();
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", audioAssetPath, 100, system, false, {}, 10);
+				const asset = plugin.createAsset("id", audioAssetPath, 100, system, false, {}, 10, undefined);
 				return new Promise<AudioAsset>((resolve, reject) => {
 					const loader: AssetLoadHandler = {
 						_onAssetLoad: (asset: AudioAsset) => {
@@ -65,7 +65,7 @@ describe("WebAudio", () => {
 				const { WebAudioPlugin } = require("@akashic/pdi-browser") as typeof index;
 				const plugin = new WebAudioPlugin();
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", audioAssetPath + "?" + query, 100, system, false, {}, 0);
+				const asset = plugin.createAsset("id", audioAssetPath + "?" + query, 100, system, false, {}, 0, undefined);
 				return new Promise<AudioAsset>((resolve, reject) => {
 					const loader: AssetLoadHandler = {
 						_onAssetLoad: (asset: AudioAsset) => {
@@ -87,7 +87,7 @@ describe("WebAudio", () => {
 				const { WebAudioPlugin } = require("@akashic/pdi-browser") as typeof index;
 				const plugin = new WebAudioPlugin();
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", "not_found_audio", 100, system, false, {}, 0);
+				const asset = plugin.createAsset("id", "not_found_audio", 100, system, false, {}, 0, undefined);
 				return new Promise<AssetLoadError>((resolve, reject) => {
 					const loader: AssetLoadHandler = {
 						_onAssetLoad: (_asset: AudioAsset) => {
@@ -113,7 +113,7 @@ describe("WebAudio", () => {
 					const plugin = new WebAudioPlugin();
 					plugin.supportedFormats = [format];
 					const system = new window.__mock__.MockAudioSystem({id: "voice"});
-					const asset = plugin.createAsset("id", audioAssetPath, 100, system, false, {}, 0);
+					const asset = plugin.createAsset("id", audioAssetPath, 100, system, false, {}, 0, undefined);
 					return new Promise<AudioAsset>((resolve) => {
 						const loader: AssetLoadHandler = {
 							_onAssetLoad: (asset: AudioAsset) => {
@@ -140,7 +140,7 @@ describe("WebAudio", () => {
 				const plugin = new WebAudioPlugin();
 				plugin.supportedFormats = ["aac"];
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", audioAsset2Path + "?" + query, 100, system, false, {}, 0);
+				const asset = plugin.createAsset("id", audioAsset2Path + "?" + query, 100, system, false, {}, 0, undefined);
 				return new Promise<AudioAsset>((resolve) => {
 					const loader: AssetLoadHandler = {
 						_onAssetLoad: (asset: AudioAsset) => {
@@ -168,7 +168,7 @@ describe("WebAudio", () => {
 				const { WebAudioPlugin } = require("@akashic/pdi-browser") as typeof index;
 				const plugin = new WebAudioPlugin();
 				const system = new window.__mock__.MockAudioSystem({id: "voice"});
-				const asset = plugin.createAsset("id", seAssetPath, 100, system, false, {}, 0);
+				const asset = plugin.createAsset("id", seAssetPath, 100, system, false, {}, 0, undefined);
 				const player = asset.play();
 				player.changeVolume(0.1);
 				return new Promise<[AudioAsset, AudioPlayer]>((resolve, reject) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akashic/pdi-browser",
-  "version": "2.8.3",
+  "version": "2.9.0-beta.0",
   "description": "An akashic-pdi implementation for Web browsers",
   "main": "index.js",
   "typings": "lib/full/index.d.ts",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@akashic/amflow": "^3.3.0",
     "@akashic/eslint-config": "^1.1.1",
-    "@akashic/pdi-types": "^1.12.0",
+    "@akashic/pdi-types": "^1.13.0-beta.0",
     "@akashic/playlog": "^3.3.0",
     "@types/jest": "^29.2.0",
     "@types/node": "^18.0.0",
@@ -74,6 +74,7 @@
     "@akashic/trigger": "^2.0.1"
   },
   "publishConfig": {
-    "@akashic:registry": "https://registry.npmjs.org/"
+    "@akashic:registry": "https://registry.npmjs.org/",
+    "tag": "next"
   }
 }

src/ResourceFactory.ts

@@ -41,13 +41,14 @@ export class ResourceFactory implements pdi.ResourceFactory {
 		system: pdi.AudioSystem,
 		loop: boolean,
 		hint: pdi.AudioAssetHint,
-		offset: number
+		offset: number,
+		loopOffset: number
 	): AudioAsset {
 		const activePlugin = this._audioPluginManager.getActivePlugin();
 		if (!activePlugin) {
 			throw new Error("ResourceFactory#createAudioAsset(): could not initialize ActivePlugin");
 		}
-		const audioAsset = activePlugin.createAsset(id, assetPath, duration, system, loop, hint, offset);
+		const audioAsset = activePlugin.createAsset(id, assetPath, duration, system, loop, hint, offset, loopOffset);
 		this._audioManager.registerAudioAsset(audioAsset);
 		audioAsset.onDestroyed.addOnce(this._onAudioAssetDestroyed, this);
 		return audioAsset;

src/asset/AudioAsset.ts

@@ -8,6 +8,7 @@ export abstract class AudioAsset extends Asset implements pdi.AudioAsset {
 	loop: boolean;
 	hint: pdi.AudioAssetHint;
 	offset: number;
+	loopOffset: number | undefined;
 	_system: pdi.AudioSystem;
 	_lastPlayedPlayer: pdi.AudioPlayer | undefined;
 
@@ -18,14 +19,16 @@ export abstract class AudioAsset extends Asset implements pdi.AudioAsset {
 		system: pdi.AudioSystem,
 		loop: boolean,
 		hint: pdi.AudioAssetHint,
-		offset: number
+		offset: number,
+		loopOffset: number | undefined,
 	) {
 		super(id, path);
 		this.duration = duration;
 		this.loop = loop;
 		this.hint = hint;
 		this._system = system;
 		this.offset = offset;
+		this.loopOffset = loopOffset;
 		this.path = this._modifyPath(this.path);
 	}
 

src/plugin/AudioPlugin.ts

@@ -19,7 +19,8 @@ export interface AudioPlugin {
 		system: pdi.AudioSystem,
 		loop: boolean,
 		hint: pdi.AudioAssetHint,
-		offset: number
+		offset: number,
+		loopOffset: number,
 	) => AudioAsset;
 
 	createPlayer: (system: pdi.AudioSystem, manager: AudioManager) => AudioPlayer;

src/plugin/HTMLAudioPlugin/AudioElementPlayer.ts

@@ -0,0 +1,145 @@
+/* eslint-disable @typescript-eslint/typedef */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+import { Trigger } from "@akashic/trigger";
+import { setupChromeMEIWorkaround } from "./HTMLAudioAutoplayHelper";
+
+export interface AudioElementPlayerParameterObject {
+	id: string;
+	element: HTMLAudioElement | null;
+	duration: number;
+	offset: number;
+	loop: boolean;
+	loopOffset: number;
+}
+
+export class AudioElementPlayer {
+	onStop: Trigger<void>;
+
+	id: string;
+	element: HTMLAudioElement | null;
+	offsetStart: number;
+	offsetEnd: number;
+	loopOffset: number;
+	duration: number;
+	loop: boolean;
+
+	_dummyTimerId: number | null;
+	_reachEndTimerId: number | null;
+	_previousCurrentTime: number;
+
+	constructor({ id, element, duration, offset, loopOffset, loop }: AudioElementPlayerParameterObject) {
+		this.id = id;
+		this.duration = duration;
+		this.offsetStart = offset;
+		this.offsetEnd = offset + duration;
+		this.loop = loop;
+		this.loopOffset = loopOffset;
+		this.onStop = new Trigger();
+		this._dummyTimerId = null;
+		this._reachEndTimerId = null;
+
+		if (element) {
+			setupChromeMEIWorkaround(element);
+			element.addEventListener("timeupdate", this._onTimeupdate, false);
+			element.addEventListener("ended", this._onEnded, false);
+			element.currentTime = this.offsetStart / 1000;
+		} else {
+			if (!loop && duration != null) {
+				this._setDummyTimer(this.duration);
+			}
+		}
+		this.element = element;
+		this._previousCurrentTime = element?.currentTime ?? 0;
+	}
+
+	rewind() {
+		this.pause();
+		this.setCurrentTime(this.loopOffset || this.offsetStart);
+		this.play();
+	}
+
+	play() {
+		this.element?.play().catch((_err) => {
+			// user interact の前に play() を呼ぶとエラーになる。これは HTMLAudioAutoplayHelper で吸収する
+		});
+	}
+
+	pause() {
+		this.element?.pause();
+		this._clearRewindTimer();
+	}
+
+	setCurrentTime(offset: number) {
+		if (!this.element) return;
+		this.element.currentTime = offset / 1000;
+		this._previousCurrentTime = this.element.currentTime;
+	}
+
+	setVolume(volume: number) {
+		if (!this.element) return;
+		this.element.volume = volume;
+	}
+
+	destroy() {
+		this.onStop.destroy();
+		const element = this.element;
+		if (element) {
+			element.removeEventListener("timeupdate", this._onTimeupdate, false);
+			element.removeEventListener("ended", this._onEnded, false);
+		}
+		this._clearDummyTimer();
+		this._clearRewindTimer();
+	}
+
+	_setDummyTimer(duration: number) {
+		this._clearDummyTimer();
+		this._dummyTimerId = window.setTimeout(() => this.pause(), duration);
+	}
+
+	_clearDummyTimer() {
+		if (this._dummyTimerId == null) return;
+		window.clearTimeout(this._dummyTimerId);
+		this._dummyTimerId = null;
+	}
+
+	_setRewindTimer(duration: number) {
+		this._clearRewindTimer();
+		this._reachEndTimerId = window.setTimeout(() => this._onReachEnd(), duration);
+	}
+
+	_clearRewindTimer() {
+		if (this._reachEndTimerId == null) return;
+		window.clearTimeout(this._reachEndTimerId);
+		this._reachEndTimerId = null;
+	}
+
+	_onReachEnd() {
+		if (this.loop) {
+			this.rewind();
+		} else {
+			this.pause();
+			this.onStop.fire();
+		}
+
+		this._clearRewindTimer();
+	}
+
+	_onTimeupdate = () => {
+		const element = this.element!; // this.element が存在する場合にのみ呼び出される
+		if (element.paused) return;
+
+		const currentOffset = element.currentTime * 1000;
+		const deltaSinceLastCall = Math.max(element.currentTime * 1000 - this._previousCurrentTime, 0);
+		const deltaUntilEnd = Math.max(this.offsetEnd - element.currentTime * 1000, 0);
+		this._previousCurrentTime = element.currentTime * 1000;
+
+		if (this.offsetEnd < currentOffset + deltaSinceLastCall || this.offsetEnd <= currentOffset) {
+			this._setRewindTimer(deltaUntilEnd);
+		}
+	};
+
+	_onEnded = () => {
+		this._onReachEnd();
+	};
+}