diff --git a/CHANGELOG.md b/CHANGELOG.md index 5555031bc2..4c4c9016ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ - Enhance: プラグインでエラーが発生した場合のハンドリングを強化 - Enhance: 細かなUIのブラッシュアップ - Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 +- Fix: 効果音が再生されるとデバイスで再生している動画や音声が停止する問題を修正 #12339 - Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236 - Fix: プラグインでノートの表示を書き換えられない問題を修正 - Fix: アイコンデコレーションが見切れる場合がある問題を修正 diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts index f995c122d1..4b0cd0bb39 100644 --- a/packages/frontend/src/scripts/sound.ts +++ b/packages/frontend/src/scripts/sound.ts @@ -5,7 +5,8 @@ import { defaultStore } from '@/store.js'; -const cache = new Map(); +const ctx = new AudioContext(); +const cache = new Map(); export const soundsTypes = [ null, @@ -60,15 +61,20 @@ export const soundsTypes = [ 'noizenecio/kick_gaba7', ] as const; -export function getAudio(file: string, useCache = true): HTMLAudioElement { - let audio: HTMLAudioElement; +export async function getAudio(file: string, useCache = true) { if (useCache && cache.has(file)) { - audio = cache.get(file); - } else { - audio = new Audio(`/client-assets/sounds/${file}.mp3`); - if (useCache) cache.set(file, audio); + return cache.get(file)!; } - return audio; + + const response = await fetch(`/client-assets/sounds/${file}.mp3`); + const arrayBuffer = await response.arrayBuffer(); + const audioBuffer = await ctx.decodeAudioData(arrayBuffer); + + if (useCache) { + cache.set(file, audioBuffer); + } + + return audioBuffer; } export function setVolume(audio: HTMLAudioElement, volume: number): HTMLAudioElement { @@ -84,8 +90,17 @@ export function play(type: 'noteMy' | 'note' | 'antenna' | 'channel' | 'notifica playFile(sound.type, sound.volume); } -export function playFile(file: string, volume: number) { - const audio = setVolume(getAudio(file), volume); - if (audio.volume === 0) return; - audio.play(); +export async function playFile(file: string, volume: number) { + const masterVolume = defaultStore.state.sound_masterVolume; + if (masterVolume === 0 || volume === 0) { + return; + } + + const gainNode = ctx.createGain(); + gainNode.gain.value = masterVolume * volume; + + const soundSource = ctx.createBufferSource(); + soundSource.buffer = await getAudio(file); + soundSource.connect(gainNode).connect(ctx.destination); + soundSource.start(); }