danoniplus 41.1.0 → 41.2.1

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2025/05/05
+ * Revised : 2025/05/09
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 41.1.0`;
-const g_revisedDate = `2025/05/05`;
+const g_version = `Ver 41.2.1`;
+const g_revisedDate = `2025/05/09`;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
 let g_localVersion = ``;
@@ -2310,6 +2310,25 @@ class AudioPlayer {
 		}
 	}
 
+	close() {
+		if (this._context) {
+			this._context.close()?.catch(() => {/* ignore double-close */ });
+			this._buffer = null;
+		}
+		if (this._source) {
+			this._source.disconnect(this._gain);
+			this._source = null;
+		}
+		if (this._gain) {
+			this._gain.disconnect();
+			this._gain = null;
+		}
+	}
+
+	get elapsedTime() {
+		return this._context.currentTime - this._startTime + this._fadeinPosition;
+	}
+
 	set currentTime(_currentTime) {
 		this._fadeinPosition = _currentTime;
 	}
@@ -2957,6 +2976,21 @@ const copySetColor = (_baseObj, _scoreId) => {
 const getMusicUrl = _scoreId =>
 	g_headerObj.musicUrls?.[g_headerObj.musicNos[_scoreId]] ?? g_headerObj.musicUrls?.[0] ?? `nosound.mp3`;
 
+/**
+ * 音源データの実際のパスを取得
+ * @param {string} _musicUrl 
+ * @returns {string}
+ */
+const getFullMusicUrl = (_musicUrl = ``) => {
+	let url = `${g_rootPath}../${g_headerObj.musicFolder}/${_musicUrl}`;
+	if (_musicUrl.indexOf(C_MRK_CURRENT_DIRECTORY) !== -1) {
+		url = _musicUrl.split(C_MRK_CURRENT_DIRECTORY)[1];
+	} else if (g_headerObj.musicFolder.indexOf(C_MRK_CURRENT_DIRECTORY) !== -1) {
+		url = `${g_headerObj.musicFolder.split(C_MRK_CURRENT_DIRECTORY)[1]}/${_musicUrl}`;
+	}
+	return url;
+}
+
 /**
  * 譜面ファイル読込後処理（譜面詳細情報取得用）
  * @param {number} _scoreId 
@@ -3755,7 +3789,22 @@ const headerConvert = _dosObj => {
 
 	// 楽曲URL
 	if (hasVal(_dosObj.musicUrl)) {
-		obj.musicUrls = splitLF2(_dosObj.musicUrl);
+		const musicUrls = splitLF2(_dosObj.musicUrl);
+		obj.musicUrls = [], obj.musicStarts = [], obj.musicEnds = [];
+		musicUrls.forEach((val, j) => {
+			const musicUrlPair = val.split(`,`);
+			obj.musicUrls[j] = musicUrlPair[0] || ``;
+			if (musicUrlPair[1] !== undefined) {
+				const musicBGMTime = musicUrlPair[1].split(`-`).map(str => str.trim());
+				obj.musicStarts[j] = Math.floor(transTimerToFrame(musicBGMTime[0] ?? 0) / g_fps);
+				obj.musicEnds[j] = musicBGMTime[1] !== undefined ?
+					Math.floor((transTimerToFrame(musicBGMTime[1] ?? 0)) / g_fps) :
+					Math.floor((transTimerToFrame(musicBGMTime[0] ?? 0) + transTimerToFrame(`0:20`)) / g_fps);
+			} else {
+				obj.musicStarts[j] = 0;
+				obj.musicEnds[j] = 20;
+			}
+		});
 	} else {
 		makeWarningWindow(g_msgInfoObj.E_0031);
 	}
@@ -4907,6 +4956,7 @@ const titleInit = (_initFlg = false) => {
 
 		// 選曲画面の初期化
 		const wheelCycle = 2;
+		g_settings.musicLoopNum = 0;
 
 		/**
 		 * メイン以外の選曲ボタンの作成
@@ -4921,6 +4971,17 @@ const titleInit = (_initFlg = false) => {
 			align: C_ALIGN_LEFT, padding: `0 10px`,
 		}, g_cssObj.button_Default_NoColor, g_cssObj.title_base);
 
+		/**
+		 * 選曲画面上の音量調整
+		 * @param {number} _num 
+		 */
+		const setBGMVolume = (_num = 1) => {
+			g_settings.bgmVolumeNum = nextPos(g_settings.bgmVolumeNum, _num, g_settings.volumes.length);
+			g_stateObj.bgmVolume = g_settings.volumes[g_settings.bgmVolumeNum];
+			g_audio.volume = g_stateObj.bgmVolume / 100;
+			btnBgmVolume.textContent = `${g_stateObj.bgmVolume}${g_lblNameObj.percent}`;
+		};
+
 		for (let j = -g_settings.mSelectableTerms; j <= g_settings.mSelectableTerms; j++) {
 			if (j !== 0) {
 				divRoot.appendChild(createMSelectBtn(j));
@@ -4933,6 +4994,7 @@ const titleInit = (_initFlg = false) => {
 			createCss2Button(`btnStart`,
 				`>`, () => {
 					clearTimeout(g_timeoutEvtTitleId);
+					pauseBGM();
 					g_handler.removeListener(wheelHandler);
 					g_keyObj.prevKey = `Dummy${g_settings.musicIdxNum}`;
 				}, Object.assign({
@@ -4943,10 +5005,25 @@ const titleInit = (_initFlg = false) => {
 			createCss2Button(`btnMusicSelectNext`, `↓`, () => changeMSelect(1),
 				g_lblPosObj.btnMusicSelectNext, g_cssObj.button_Setting),
 			createCss2Button(`btnMusicSelectRandom`, `Random`, () =>
-				changeMSelect(g_headerObj.musicIdxList[Math.floor(Math.random() * g_headerObj.musicIdxList.length)]),
+				changeMSelect(Math.floor(Math.random() * (g_headerObj.musicIdxList.length - 1)) + 1),
 				g_lblPosObj.btnMusicSelectRandom, g_cssObj.button_Default),
 			createDivCss2Label(`lblMusicCnt`, ``, g_lblPosObj.lblMusicCnt),
 			createDivCss2Label(`lblComment`, ``, g_lblPosObj.lblComment_music),
+
+			createDivCss2Label(`lblBgmVolume`, `BGM Volume`, g_lblPosObj.lblBgmVolume),
+			createCss2Button(`btnBgmMute`, g_stateObj.bgmMuteFlg ? `&#x1f507;` : `&#x1f50a;`, evt => {
+				g_stateObj.bgmMuteFlg = !g_stateObj.bgmMuteFlg;
+				g_stateObj.bgmMuteFlg ? pauseBGM() : playBGM(0);
+				evt.target.innerHTML = g_stateObj.bgmMuteFlg ? `&#x1f507;` : `&#x1f50a;`;
+			}, g_lblPosObj.btnBgmMute, g_cssObj.button_Default),
+			createCss2Button(`btnBgmVolume`, `${g_stateObj.bgmVolume}${g_lblNameObj.percent}`, () => setBGMVolume(),
+				Object.assign({
+					cxtFunc: () => setBGMVolume(-1),
+				}, g_lblPosObj.btnBgmVolume), g_cssObj.button_Default),
+			createCss2Button(`btnBgmVolumeL`, `<`, () => setBGMVolume(-1),
+				g_lblPosObj.btnBgmVolumeL, g_cssObj.button_Setting),
+			createCss2Button(`btnBgmVolumeR`, `>`, () => setBGMVolume(),
+				g_lblPosObj.btnBgmVolumeR, g_cssObj.button_Setting),
 		);
 		changeMSelect(0, _initFlg);
 
@@ -4976,6 +5053,7 @@ const titleInit = (_initFlg = false) => {
 
 		// 初期表示用 (2秒後に選曲画面を表示)
 		if (_initFlg && !g_headerObj.customTitleUse) {
+			g_audio.muted = true;
 			const mSelectTitleSprite = createEmptySprite(divRoot, `mSelectTitleSprite`,
 				g_windowObj.mSelectTitleSprite, g_cssObj.settings_DifSelector);
 			multiAppend(mSelectTitleSprite,
@@ -4994,6 +5072,8 @@ const titleInit = (_initFlg = false) => {
 				if (_opacity <= 0) {
 					clearTimeout(fadeOpacity);
 					mSelectTitleSprite.style.display = C_DIS_NONE;
+					g_audio.muted = false;
+					g_audio.currentTime = g_headerObj.musicStarts[g_headerObj.musicIdxList[g_settings.musicIdxNum]] ?? 0;
 				} else {
 					mSelectTitleSprite.style.opacity = _opacity;
 					fadeOpacity = setTimeout(() => {
@@ -5278,6 +5358,173 @@ const getCreatorInfo = (_creatorList) => {
 	return [creatorName, creatorUrl, creatorIdx];
 }
 
+/**
+ * BGMの停止
+ */
+const pauseBGM = () => {
+	if (g_audio) {
+		g_handler.removeListener(g_stateObj.bgmTimeupdateEvtId);
+		g_audio.pause();
+		if (!(g_audio instanceof AudioPlayer)) {
+			g_audio.removeAttribute('src');
+			g_audio.load();
+		}
+	}
+	[`bgmLooped`, `bgmFadeIn`, `bgmFadeOut`].forEach(id => {
+		if (g_stateObj[id]) {
+			clearInterval(g_stateObj[id]);
+			g_stateObj[id] = null;
+		}
+	});
+};
+
+/**
+ * BGM再生処理
+ * @param {number} _num 
+ * @param {number} _currentLoopNum
+ */
+const playBGM = async (_num, _currentLoopNum = g_settings.musicLoopNum) => {
+	const FADE_STEP = 0.05 * g_stateObj.bgmVolume / 100;
+	const FADE_INTERVAL_MS = 100;
+	const FADE_DELAY_MS = 500;
+
+	const musicUrl = getMusicUrl(g_headerObj.viewLists[0]);
+	const url = getFullMusicUrl(musicUrl);
+	const encodeFlg = listMatching(musicUrl, [`.js`, `.txt`], { suffix: `$` });
+	const musicStart = g_headerObj.musicStarts?.[g_headerObj.musicIdxList[g_settings.musicIdxNum]] ?? 0;
+	const musicEnd = g_headerObj.musicEnds?.[g_headerObj.musicIdxList[g_settings.musicIdxNum]] ?? 0;
+
+	/**
+	 * BGMのフェードアウトとシーク
+	 */
+	const fadeOutAndSeek = () => {
+		let volume = g_audio.volume;
+		const fadeInterval = setInterval(() => {
+			if (volume > FADE_STEP && g_currentPage === `title`) {
+				volume -= FADE_STEP;
+				g_audio.volume = Math.max(volume, 0);
+			} else {
+				clearInterval(fadeInterval);
+				g_stateObj.bgmFadeOut = null;
+				g_audio.pause();
+				g_audio.currentTime = musicStart;
+
+				// フェードイン開始
+				if (g_currentPage === `title`) {
+					setTimeout(() => {
+						fadeIn();
+						if (encodeFlg) {
+							// base64エンコード時はtimeupdateイベントが発火しないため、
+							// setIntervalで時間を取得する
+							repeatBGM();
+						}
+					}, FADE_DELAY_MS);
+				} else {
+					pauseBGM();
+				}
+			}
+		}, FADE_INTERVAL_MS);
+		g_stateObj.bgmFadeOut = fadeInterval;
+	};
+
+	/**
+	 * BGMのフェードイン
+	 */
+	const fadeIn = () => {
+		if (!(g_audio instanceof AudioPlayer) && !g_audio.src) {
+			return;
+		}
+		let volume = 0;
+		g_audio.play();
+		const fadeInterval = setInterval(() => {
+			if (volume < g_stateObj.bgmVolume / 100 && g_currentPage === `title`) {
+				volume += FADE_STEP;
+				g_audio.volume = Math.min(volume, 1);
+			} else {
+				clearInterval(fadeInterval);
+				g_stateObj.bgmFadeIn = null;
+			}
+		}, FADE_INTERVAL_MS);
+		g_stateObj.bgmFadeIn = fadeInterval;
+	};
+
+	/**
+	 * BGMのループ処理
+	 */
+	const repeatBGM = () => {
+		if (encodeFlg) {
+			// base64エンコード時はtimeupdateイベントが発火しないため、setIntervalで時間を取得する
+			const repeatCheck = setInterval((num = g_settings.musicIdxNum) => {
+				try {
+					if (((g_audio.elapsedTime >= musicEnd) ||
+						num !== g_settings.musicIdxNum) && g_stateObj.bgmLooped !== null) {
+						clearInterval(repeatCheck);
+						g_stateObj.bgmLooped = null;
+						fadeOutAndSeek();
+					}
+				} catch (e) {
+					clearInterval(repeatCheck);
+					g_stateObj.bgmLooped = null;
+				}
+			}, FADE_INTERVAL_MS);
+			g_stateObj.bgmLooped = repeatCheck;
+
+		} else {
+			g_stateObj.bgmTimeupdateEvtId = g_handler.addListener(g_audio, "timeupdate", () => {
+				if (g_audio.currentTime >= musicEnd) {
+					fadeOutAndSeek();
+				}
+			});
+		}
+	};
+
+	if (encodeFlg) {
+		try {
+			// base64エンコードは読込に時間が掛かるため、曲変更時のみ読込
+			if (!hasVal(g_musicdata) || Math.abs(_num) % g_headerObj.musicIdxList.length !== 0) {
+				await loadScript2(url);
+				musicInit();
+				if (_currentLoopNum !== g_settings.musicLoopNum) {
+					return;
+				}
+				const tmpAudio = new AudioPlayer();
+				const array = Uint8Array.from(atob(g_musicdata), v => v.charCodeAt(0));
+				await tmpAudio.init(array.buffer);
+				if (_currentLoopNum !== g_settings.musicLoopNum) {
+					tmpAudio.close();
+					return;
+				}
+				g_audio = tmpAudio;
+			}
+			g_audio.volume = g_stateObj.bgmVolume / 100;
+			if (g_currentPage === `title`) {
+				g_audio.currentTime = musicStart;
+				g_audio.play();
+			}
+		} catch (e) {
+			// 音源の読み込みに失敗した場合、エラーを表示
+			console.warn(`BGM load error: ${e}`);
+		}
+
+	} else {
+		g_audio = new Audio();
+		g_audio.src = url;
+		g_audio.autoplay = false;
+		g_audio.volume = g_stateObj.bgmVolume / 100;
+		const loadedMeta = g_handler.addListener(g_audio, `loadedmetadata`, () => {
+			g_handler.removeListener(loadedMeta);
+			if (_currentLoopNum !== g_settings.musicLoopNum) {
+				return;
+			}
+			g_audio.currentTime = musicStart;
+			g_audio.play();
+		}, { once: true });
+	}
+	if (musicEnd > 0) {
+		repeatBGM();
+	}
+};
+
 /**
  * 選曲ボタンを押したときの処理
  * @param {number} _num 
@@ -5285,6 +5532,7 @@ const getCreatorInfo = (_creatorList) => {
  */
 const changeMSelect = (_num, _initFlg = false) => {
 	const limitedMLength = 35;
+	pauseBGM();
 
 	// 選択方向に合わせて楽曲リスト情報を再取得
 	for (let j = -g_settings.mSelectableTerms; j <= g_settings.mSelectableTerms; j++) {
@@ -5301,6 +5549,10 @@ const changeMSelect = (_num, _initFlg = false) => {
 	// 現在選択中の楽曲IDを再設定
 	g_settings.musicIdxNum = (g_settings.musicIdxNum + _num + g_headerObj.musicIdxList.length) % g_headerObj.musicIdxList.length;
 
+	// 楽曲の多重読込防止（この値が変化していれば読み込まない）
+	g_settings.musicLoopNum++;
+	const currentLoopNum = g_settings.musicLoopNum;
+
 	// 選択した楽曲に対応する譜面番号、製作者情報、曲長を取得
 	g_headerObj.viewLists = [];
 	const tmpKeyList = [], tmpCreatorList = [], tmpPlayingFrameList = [], tmpBpmList = [];
@@ -5346,7 +5598,7 @@ const changeMSelect = (_num, _initFlg = false) => {
 	viewKeyStorage.cache = new Map();
 
 	// 初期化もしくは楽曲変更時に速度を初期化
-	if (_initFlg || _num !== 0) {
+	if (_initFlg || Math.abs(_num) % g_headerObj.musicIdxList.length !== 0) {
 		g_stateObj.speed = g_headerObj.initSpeeds[g_headerObj.viewLists[0]];
 		g_settings.speedNum = getCurrentNo(g_settings.speeds, g_stateObj.speed);
 	}
@@ -5354,6 +5606,19 @@ const changeMSelect = (_num, _initFlg = false) => {
 	// コメント文の加工
 	lblComment.innerHTML = convertStrToVal(g_headerObj[`commentVal${g_settings.musicIdxNum}`]);
 
+	// BGM再生処理
+	if (!g_stateObj.bgmMuteFlg) {
+		if (_initFlg) {
+			playBGM(_num);
+		} else {
+			setTimeout(() => {
+				if (currentLoopNum === g_settings.musicLoopNum) {
+					playBGM(_num, currentLoopNum);
+				}
+			}, 500);
+		}
+	}
+
 	// 選曲変更時のカスタム関数実行
 	g_customJsObj.musicSelect.forEach(func => func(g_settings.musicIdxNum));
 };
@@ -5887,7 +6152,7 @@ const optionInit = () => {
  */
 const getMusicInfoView = () => {
 	const idx = g_headerObj.musicNos[g_stateObj.scoreId];
-	let text = `♪` + (g_headerObj.musicSelectUse ? `${g_headerObj.musicTitles[idx]} / ` : ``) +
+	let text = `♪` + (g_headerObj.musicSelectUse ? `${unEscapeHtml(g_headerObj.musicTitles[idx])} / ` : ``) +
 		`BPM: ${g_headerObj.bpms[idx]}`;
 	if (!g_headerObj.musicSelectUse && g_headerObj.bpms[idx] === `----`) {
 		text = ``;
@@ -8875,13 +9140,7 @@ const loadMusic = () => {
 	g_currentPage = `loading`;
 
 	const musicUrl = getMusicUrl(g_stateObj.scoreId);
-	let url = `${g_rootPath}../${g_headerObj.musicFolder}/${musicUrl}`;
-	if (musicUrl.indexOf(C_MRK_CURRENT_DIRECTORY) !== -1) {
-		url = musicUrl.split(C_MRK_CURRENT_DIRECTORY)[1];
-	} else if (g_headerObj.musicFolder.indexOf(C_MRK_CURRENT_DIRECTORY) !== -1) {
-		url = `${g_headerObj.musicFolder.split(C_MRK_CURRENT_DIRECTORY)[1]}/${musicUrl}`;
-	}
-
+	const url = getFullMusicUrl(musicUrl);
 	g_headerObj.musicUrl = musicUrl;
 	g_musicEncodedFlg = listMatching(musicUrl, [`.js`, `.txt`], { suffix: `$` });
 
@@ -8943,6 +9202,7 @@ const setAudio = async (_url) => {
 
 	const loadMp3 = () => {
 		if (g_isFile) {
+			g_audio = new Audio();
 			g_audio.src = _url;
 			musicAfterLoaded();
 		} else {

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2025/04/21 (v41.0.2)
+ * Revised : 2025/05/09 (v41.2.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -288,6 +288,21 @@ const updateWindowSiz = () => {
             siz: g_limitObj.difSelectorSiz, align: C_ALIGN_LEFT,
             overflow: C_DIS_AUTO, whiteSpace: `normal`,
         },
+        btnBgmMute: {
+            x: g_btnX() + 90, y: g_sHeight - 105, w: 40, h: 35, siz: 30,
+        },
+        lblBgmVolume: {
+            x: g_btnX(), y: g_sHeight - 85, w: g_btnWidth(1 / 4), h: 20, siz: 12, align: C_ALIGN_LEFT,
+        },
+        btnBgmVolume: {
+            x: g_btnX() + 20, y: g_sHeight - 70, w: g_btnWidth(1 / 4) - 40, h: 20, siz: 14,
+        },
+        btnBgmVolumeL: {
+            x: g_btnX(), y: g_sHeight - 70, w: 20, h: 20, siz: 12,
+        },
+        btnBgmVolumeR: {
+            x: g_btnX() + g_btnWidth(1 / 4) - 20, y: g_sHeight - 70, w: 20, h: 20, siz: 12,
+        },
 
         /** データ管理 */
         btnResetBack: {
@@ -999,6 +1014,13 @@ let C_WOD_FRAME = 30;
 // 譜面データ持ち回り用
 const g_stateObj = {
     keyInitial: false,
+    bgmVolume: 50,
+    bgmLooped: null,
+    bgmFadeIn: null,
+    bgmFadeOut: null,
+    bgmTimeupdateEvtId: null,
+    bgmMuteFlg: false,
+
     dosDivideFlg: false,
     scoreLockFlg: false,
     scoreId: 0,
@@ -1015,6 +1037,7 @@ const g_stateObj = {
     hitPosition: 0,
     fadein: 0,
     volume: 100,
+
     lifeRcv: 2,
     lifeDmg: 7,
     lifeMode: `Border`,
@@ -1115,6 +1138,7 @@ const makeSpeedList = (_minSpd, _maxSpd) => [...Array((_maxSpd - _minSpd) * 20 +
 const g_settings = {
 
     musicIdxNum: 0,
+    musicLoopNum: 0,
     dataMgtNum: {
         environment: 0,
         highscores: 0,
@@ -1163,6 +1187,7 @@ const g_settings = {
 
     volumes: [0, 0.5, 1, 2, 5, 10, 25, 50, 75, 100],
     volumeNum: 0,
+    bgmVolumeNum: 0,
 
     appearances: [`Visible`, `Hidden`, `Hidden+`, `Sudden`, `Sudden+`, `Hid&Sud+`],
     appearanceNum: 0,
@@ -1239,6 +1264,7 @@ const g_settings = {
 };
 
 g_settings.volumeNum = g_settings.volumes.length - 1;
+g_settings.bgmVolumeNum = roundZero(g_settings.volumes.findIndex(v => v === g_stateObj.bgmVolume));
 g_settings.opacityNum = g_settings.opacitys.length - 1;
 
 /**
@@ -2075,6 +2101,10 @@ const g_shortcutObj = {
         KeyD: { id: `btnReset` },
         ArrowUp: { id: `btnMusicSelectPrev` },
         ArrowDown: { id: `btnMusicSelectNext` },
+        ArrowLeft: { id: `btnBgmVolumeL` },
+        ArrowRight: { id: `btnBgmVolumeR` },
+        KeyM: { id: `btnBgmMute` },
+        KeyR: { id: `btnMusicSelectRandom` },
     },
     dataMgt: {
         KeyE: { id: `btnEnvironment` },
@@ -2433,7 +2463,7 @@ Object.keys(g_btnWaitFrame).forEach(key => {
 // - btn + プロパティ名に合致するボタンid名に対して、
 //   どの位置(X方向)にショートカット名を表示するかを設定
 const g_btnPatterns = {
-    title: { Start: 0, Comment: -10 },
+    title: { Start: 0, Comment: -10, MusicSelectRandom: -10 },
     dataMgt: { Back: 0, Environment: -35, Highscores: -35, CustomKey: -35, Others: -35 },
     precondition: { Back: 0 },
     option: { Back: 0, KeyConfig: 0, Play: 0, Display: -5, Save: -10, Graph: -25 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "41.1.0",
+  "version": "41.2.1",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "./js/danoni_main.js",
   "scripts": {