refactor(frontend): サウンド再生まわりのリファクタリング

packages/frontend/src/boot/main-boot.ts

@@ -13,7 +13,7 @@ import type { Keymap } from '@/utility/hotkey.js';
 import { i18n } from '@/i18n.js';
 import { alert, confirm, popup, post } from '@/os.js';
 import { useStream } from '@/stream.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import { $i } from '@/i.js';
 import { instance } from '@/instance.js';
 import { store } from '@/store.js';
@@ -363,7 +363,7 @@ export async function mainBoot() {
 
 			main.on('newChatMessage', () => {
 				updateCurrentAccountPartial({ hasUnreadChatMessages: true });
-				sound.playMisskeySfx('chatMessage');
+				soundManager.playSfx('chatMessage');
 			});
 
 			main.on('readAllAnnouncements', () => {

packages/frontend/src/components/MkNote.vue

@@ -223,7 +223,7 @@ import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import number from '@/filters/number.js';
 import * as os from '@/os.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
 import { reactionPicker } from '@/utility/reaction-picker.js';
 import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
@@ -405,7 +405,7 @@ const keymap = {
 } as const satisfies Keymap;
 
 provide(DI.mfmEmojiReactCallback, (reaction) => {
-	sound.playMisskeySfx('reaction');
+	soundManager.playSfx('reaction');
 	misskeyApi('notes/reactions/create', {
 		noteId: appearNote.id,
 		reaction: reaction,
@@ -490,7 +490,7 @@ function react(): void {
 	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
 	if (appearNote.reactionAcceptance === 'likeOnly') {
-		sound.playMisskeySfx('reaction');
+		soundManager.playSfx('reaction');
 
 		if (props.mock) {
 			return;
@@ -526,7 +526,7 @@ function react(): void {
 				if (confirm.canceled) return;
 			}
 
-			sound.playMisskeySfx('reaction');
+			soundManager.playSfx('reaction');
 
 			if (props.mock) {
 				emit('reaction', reaction);

packages/frontend/src/components/MkNoteDetailed.vue

@@ -255,7 +255,7 @@ import { notePage } from '@/filters/note.js';
 import number from '@/filters/number.js';
 import * as os from '@/os.js';
 import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import { reactionPicker } from '@/utility/reaction-picker.js';
 import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
 import { $i } from '@/i.js';
@@ -364,7 +364,7 @@ const keymap = {
 } as const satisfies Keymap;
 
 provide(DI.mfmEmojiReactCallback, (reaction) => {
-	sound.playMisskeySfx('reaction');
+	soundManager.playSfx('reaction');
 	misskeyApi('notes/reactions/create', {
 		noteId: appearNote.id,
 		reaction: reaction,
@@ -467,7 +467,7 @@ function react(): void {
 	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
 	if (appearNote.reactionAcceptance === 'likeOnly') {
-		sound.playMisskeySfx('reaction');
+		soundManager.playSfx('reaction');
 
 		misskeyApi('notes/reactions/create', {
 			noteId: appearNote.id,
@@ -499,7 +499,7 @@ function react(): void {
 				if (confirm.canceled) return;
 			}
 
-			sound.playMisskeySfx('reaction');
+			soundManager.playSfx('reaction');
 
 			misskeyApi('notes/reactions/create', {
 				noteId: appearNote.id,

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -31,7 +31,7 @@ import { useTooltip } from '@/composables/use-tooltip.js';
 import { $i } from '@/i.js';
 import MkReactionEffect from '@/components/MkReactionEffect.vue';
 import { i18n } from '@/i18n.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import { checkReactionPermissions } from '@/utility/check-reaction-permissions.js';
 import { customEmojisMap } from '@/custom-emojis.js';
 import { prefer } from '@/preferences.js';
@@ -84,7 +84,7 @@ async function toggleReaction() {
 		if (confirm.canceled) return;
 
 		if (oldReaction !== props.reaction) {
-			sound.playMisskeySfx('reaction');
+			soundManager.playSfx('reaction');
 			haptic();
 		}
 
@@ -125,7 +125,7 @@ async function toggleReaction() {
 			if (confirm.canceled) return;
 		}
 
-		sound.playMisskeySfx('reaction');
+		soundManager.playSfx('reaction');
 		haptic();
 
 		if (mock) {

packages/frontend/src/components/MkStreamingNotesTimeline.vue

@@ -66,7 +66,7 @@ import type { SoundStore } from '@/preferences/def.js';
 import type { IPaginator, MisskeyEntity } from '@/utility/paginator.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import { useStream } from '@/stream.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import { $i } from '@/i.js';
 import { instance } from '@/instance.js';
 import { prefer } from '@/preferences.js';
@@ -290,9 +290,9 @@ function prepend(note: Misskey.entities.Note & MisskeyEntity) {
 
 	if (props.sound) {
 		if (props.customSound) {
-			sound.playMisskeySfxFile(props.customSound);
+			soundManager.playSfxFile(props.customSound);
 		} else {
-			sound.playMisskeySfx($i && (note.userId === $i.id) ? 'noteMy' : 'note');
+			soundManager.playSfx($i && (note.userId === $i.id) ? 'noteMy' : 'note');
 		}
 	}
 }

packages/frontend/src/pages/chat/XMessage.vue

@@ -68,7 +68,7 @@ import * as os from '@/os.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import MkMediaList from '@/components/MkMediaList.vue';
 import { reactionPicker } from '@/utility/reaction-picker.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
@@ -87,7 +87,7 @@ const urls = computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(pro
 provide(DI.mfmEmojiReactCallback, (reaction) => {
 	if ($i.policies.chatAvailability !== 'available') return;
 
-	sound.playMisskeySfx('reaction');
+	soundManager.playSfx('reaction');
 	misskeyApi('chat/messages/react', {
 		messageId: props.message.id,
 		reaction: reaction,
@@ -101,7 +101,7 @@ function react(ev: MouseEvent) {
 	if (!targetEl) return;
 
 	reactionPicker.show(targetEl, null, async (reaction) => {
-		sound.playMisskeySfx('reaction');
+		soundManager.playSfx('reaction');
 		misskeyApi('chat/messages/react', {
 			messageId: props.message.id,
 			reaction: reaction,
@@ -119,7 +119,7 @@ function onReactionClick(record: Misskey.entities.ChatMessage['reactions'][0]) {
 		});
 	} else {
 		if (!props.message.reactions.some(r => r.user.id === $i.id && r.reaction === record.reaction)) {
-			sound.playMisskeySfx('reaction');
+			soundManager.playSfx('reaction');
 			misskeyApi('chat/messages/react', {
 				messageId: props.message.id,
 				reaction: record.reaction,

packages/frontend/src/pages/chat/room.vue

@@ -100,7 +100,7 @@ import type { MenuItem } from '@/types/menu.js';
 import type { PageHeaderItem } from '@/types/page-header.js';
 import * as os from '@/os.js';
 import { useStream } from '@/stream.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import { i18n } from '@/i18n.js';
 import { ensureSignin } from '@/i.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -288,7 +288,7 @@ async function fetchMore() {
 }
 
 function onMessage(message: Misskey.entities.ChatMessageLite) {
-	sound.playMisskeySfx('chatMessage');
+	soundManager.playSfx('chatMessage');
 
 	messages.value.unshift(normalizeMessage(message));
 

packages/frontend/src/pages/drop-and-fusion.game.vue

@@ -209,7 +209,7 @@ import { store } from '@/store.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import MkRange from '@/components/MkRange.vue';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { prefer } from '@/preferences.js';
@@ -555,7 +555,7 @@ let seed: string = Date.now().toString();
 let containerElRect: DOMRect | null = null;
 let logs: ReturnType<DropAndFusionGame['getLogs']> | null = null;
 let endedAtFrame = 0;
-let bgmNodes: ReturnType<typeof sound.createSourceNode> | null = null;
+let bgmNodes: ReturnType<typeof soundManager.createSourceNode> | null = null;
 let renderer: Matter.Render | null = null;
 let monoTextures: Record<string, Blob> = {};
 let monoTextureUrls: Record<string, string> = {};
@@ -964,7 +964,7 @@ function attachGameEvents() {
 		holdingStock.value = value;
 
 		if (!props.mute) {
-			sound.playUrl('/client-assets/drop-and-fusion/hold.mp3', {
+			soundManager.playUrl('/client-assets/drop-and-fusion/hold.mp3', {
 				volume: 0.5 * sfxVolume.value,
 				playbackRate: replayPlaybackRate.value,
 			});
@@ -977,13 +977,13 @@ function attachGameEvents() {
 			const panW = game.GAME_WIDTH - game.PLAYAREA_MARGIN - game.PLAYAREA_MARGIN;
 			const pan = ((panV / panW) - 0.5) * 2;
 			if (props.gameMode === 'yen') {
-				sound.playUrl('/client-assets/drop-and-fusion/drop_yen.mp3', {
+				soundManager.playUrl('/client-assets/drop-and-fusion/drop_yen.mp3', {
 					volume: sfxVolume.value,
 					pan,
 					playbackRate: replayPlaybackRate.value,
 				});
 			} else {
-				sound.playUrl('/client-assets/drop-and-fusion/drop.mp3', {
+				soundManager.playUrl('/client-assets/drop-and-fusion/drop.mp3', {
 					volume: sfxVolume.value,
 					pan,
 					playbackRate: replayPlaybackRate.value,
@@ -1029,13 +1029,13 @@ function attachGameEvents() {
 				const pan = ((panV / panW) - 0.5) * 2;
 				const pitch = def.sfxPitch;
 				if (props.gameMode === 'yen') {
-					sound.playUrl('/client-assets/drop-and-fusion/fusion_yen.mp3', {
+					soundManager.playUrl('/client-assets/drop-and-fusion/fusion_yen.mp3', {
 						volume: 0.25 * sfxVolume.value,
 						pan: pan,
 						playbackRate: (pitch / 4) * replayPlaybackRate.value,
 					});
 				} else {
-					sound.playUrl('/client-assets/drop-and-fusion/fusion.mp3', {
+					soundManager.playUrl('/client-assets/drop-and-fusion/fusion.mp3', {
 						volume: sfxVolume.value,
 						pan: pan,
 						playbackRate: pitch * replayPlaybackRate.value,
@@ -1066,13 +1066,13 @@ function attachGameEvents() {
 			const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
 
 			if (props.gameMode === 'yen') {
-				sound.playUrl('/client-assets/drop-and-fusion/collision_yen.mp3', {
+				soundManager.playUrl('/client-assets/drop-and-fusion/collision_yen.mp3', {
 					volume: volume * sfxVolume.value,
 					pan: pan,
 					playbackRate: Math.max(1, pitch) * replayPlaybackRate.value,
 				});
 			} else {
-				sound.playUrl('/client-assets/drop-and-fusion/collision.mp3', {
+				soundManager.playUrl('/client-assets/drop-and-fusion/collision.mp3', {
 					volume: volume * sfxVolume.value,
 					pan: pan,
 					playbackRate: pitch * replayPlaybackRate.value,
@@ -1098,11 +1098,11 @@ function attachGameEvents() {
 	game.addListener('gameOver', () => {
 		if (!props.mute) {
 			if (props.gameMode === 'yen') {
-				sound.playUrl('/client-assets/drop-and-fusion/gameover_yen.mp3', {
+				soundManager.playUrl('/client-assets/drop-and-fusion/gameover_yen.mp3', {
 					volume: 0.5 * sfxVolume.value,
 				});
 			} else {
-				sound.playUrl('/client-assets/drop-and-fusion/gameover.mp3', {
+				soundManager.playUrl('/client-assets/drop-and-fusion/gameover.mp3', {
 					volume: sfxVolume.value,
 				});
 			}
@@ -1208,24 +1208,24 @@ onMounted(async () => {
 
 	await start();
 
-	const bgmBuffer = await sound.loadAudio('/client-assets/drop-and-fusion/bgm_1.mp3');
+	const bgmBuffer = await soundManager.loadAudio('/client-assets/drop-and-fusion/bgm_1.mp3');
 	if (!bgmBuffer) return;
-	bgmNodes = sound.createSourceNode(bgmBuffer, {
+	bgmNodes = soundManager.createSourceNode(bgmBuffer, {
 		volume: props.mute ? 0 : bgmVolume.value,
 	});
 	if (!bgmNodes) return;
-	bgmNodes.soundSource.loop = true;
-	bgmNodes.soundSource.start();
+	bgmNodes.sourceNode.loop = true;
+	bgmNodes.sourceNode.start();
 });
 
 onUnmounted(() => {
 	dispose();
-	bgmNodes?.soundSource.stop();
+	bgmNodes?.sourceNode.stop();
 });
 
 onDeactivated(() => {
 	dispose();
-	bgmNodes?.soundSource.stop();
+	bgmNodes?.sourceNode.stop();
 });
 
 definePage(() => ({

packages/frontend/src/pages/reversi/game.board.vue

@@ -155,7 +155,7 @@ import { ensureSignin } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { userPage } from '@/filters/user.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import * as os from '@/os.js';
 import { confetti } from '@/utility/confetti.js';
 import { genId } from '@/utility/id.js';
@@ -269,7 +269,7 @@ function putStone(pos: number) {
 
 	triggerRef(engine);
 
-	sound.playUrl('/client-assets/reversi/put.mp3', {
+	soundManager.playUrl('/client-assets/reversi/put.mp3', {
 		volume: 1,
 		playbackRate: 1,
 	});
@@ -319,7 +319,7 @@ async function onStreamLog(log) {
 	if (log.id == null || !appliedOps.includes(log.id)) {
 		switch (log.operation) {
 			case 'put': {
-				sound.playUrl('/client-assets/reversi/put.mp3', {
+				soundManager.playUrl('/client-assets/reversi/put.mp3', {
 					volume: 1,
 					playbackRate: 1,
 				});
@@ -356,12 +356,12 @@ function onStreamEnded(x) {
 			duration: 1000 * 3,
 		});
 
-		sound.playUrl('/client-assets/reversi/win.mp3', {
+		soundManager.playUrl('/client-assets/reversi/win.mp3', {
 			volume: 1,
 			playbackRate: 1,
 		});
 	} else {
-		sound.playUrl('/client-assets/reversi/lose.mp3', {
+		soundManager.playUrl('/client-assets/reversi/lose.mp3', {
 			volume: 1,
 			playbackRate: 1,
 		});

packages/frontend/src/pages/reversi/index.vue

@@ -119,7 +119,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import { useRouter } from '@/router.js';
 import * as os from '@/os.js';
 import { pleaseLogin } from '@/utility/please-login.js';
-import * as sound from '@/utility/sound.js';
+import { soundManager } from '@/sound.js';
 import { Paginator } from '@/utility/paginator.js';
 
 const myGamesPaginator = markRaw(new Paginator('reversi/games', {
@@ -163,7 +163,7 @@ function startGame(game: Misskey.entities.ReversiGameDetailed) {
 	matchingUser.value = null;
 	matchingAny.value = false;
 
-	sound.playUrl('/client-assets/reversi/matched.mp3', {
+	soundManager.playUrl('/client-assets/reversi/matched.mp3', {
 		volume: 1,
 		playbackRate: 1,
 	});