页面加载时用Svelte播放音效无声音，onMount方案失效求助

你的代码没声音主要有两个核心原因：

1. 浏览器自动播放限制：现代浏览器默认禁止页面未经过用户交互就自动播放带声音的媒体，这是出于用户体验和隐私的保护策略。
2. 音频加载时机问题：onMount触发时，音频资源可能还没完成加载，直接调用play()会因为资源未就绪而失败。

下面是几个可行的解决方案：

方案一：等待音频加载完成后播放 #

利用canplaythrough事件确保音频加载到足够流畅播放的状态，再执行播放操作：

<script lang="ts">
    import { onMount } from 'svelte';

    let celebration: HTMLAudioElement;

    onMount(() => {
        const handlePlay = () => {
            celebration.play().catch(err => console.error('播放失败:', err));
            celebration.removeEventListener('canplaythrough', handlePlay);
            
            setTimeout(() => {
                celebration.pause();
                celebration.currentTime = 0;
            }, 1000);
        };

        celebration.addEventListener('canplaythrough', handlePlay);
        
        return () => {
            celebration.removeEventListener('canplaythrough', handlePlay);
        };
    });
</script>

<audio
    src='https://sveltejs.github.io/assets/music/strauss.mp3'
    preload="auto"
    bind:this={celebration}
    controls
>
    <track kind="captions" />
</audio>

方案二：通过用户交互触发播放（兼容性最优） #

既然浏览器限制无交互自动播放，直接添加一个交互按钮引导用户触发播放，这是兼容性最好的方式：

<script lang="ts">
    import { onMount } from 'svelte';

    let celebration: HTMLAudioElement;
    let showPlayPrompt = true;

    const playAudio = () => {
        celebration.play().catch(err => console.error('播放失败:', err));
        showPlayPrompt = false;
        
        setTimeout(() => {
            celebration.pause();
            celebration.currentTime = 0;
        }, 1000);
    };

    onMount(() => {
        // 先尝试自动播放，失败则显示交互提示
        celebration.play().catch(() => {
            showPlayPrompt = true;
        });
    });
</script>

{#if showPlayPrompt}
    <button on:click={playAudio}>点击播放音效</button>
{/if}

<audio
    src='https://sveltejs.github.io/assets/music/strauss.mp3'
    preload="auto"
    bind:this={celebration}
    controls
>
    <track kind="captions" />
</audio>

方案三：静音后播放（仅作参考，需业务场景支持） #

部分浏览器允许静音状态的音频自动播放，若你的场景允许，可以先静音播放，再尝试取消静音（取消静音仍需用户交互）：

<script lang="ts">
    import { onMount } from 'svelte';

    let celebration: HTMLAudioElement;

    onMount(async () => {
        celebration.muted = true;
        try {
            await celebration.play();
            // 播放后尝试取消静音（需用户交互才能生效）
            setTimeout(() => {
                celebration.muted = false;
            }, 100);
            
            setTimeout(() => {
                celebration.pause();
                celebration.currentTime = 0;
            }, 1000);
        } catch (err) {
            console.error('播放失败:', err);
        }
    });
</script>

<audio
    src='https://sveltejs.github.io/assets/music/strauss.mp3'
    preload="auto"
    bind:this={celebration}
    controls
>
    <track kind="captions" />
</audio>

注意事项 #

• 务必处理play()的Promise异常，通过catch可以查看具体的失败原因，方便调试。
• 不同浏览器的自动播放政策略有差异，优先推荐方案二，通过用户交互触发播放，能覆盖绝大多数场景。

内容的提问来源于stack exchange，提问作者Josiane Morissette