NextJS中实现点击按钮播放MP3音频的问题求助

嘿，刚接触JS框架踩点小坑很正常，咱们来一步步搞定你的需求～

首先看你代码里的核心问题：

• 按钮点击事件的写法错误：你现在写的onClick={play()}会在组件渲染的时候就立刻执行play函数，而不是等你点击按钮才触发。正确的写法是传递函数本身，也就是onClick={play}，这样点击按钮时才会调用这个函数。

先给你一个基础修正版，只改这个错误就能正常工作：

import Head from 'next/head'

export default function Home() {
  function play() {
    var audio = document.getElementById('a1');
    audio.play();
  }
  return (
    <div className='home'>
      <Head>
        <title>Create Next App</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <div className='container'>
        <div className='col'>
          {/* 这里把play()改成play，传递函数引用 */}
          <button onClick={play}>Click</button>
          <audio id='a1' src='/static/src.mp3'></audio>
        </div>
      </div>
    </div>
  );
}

不过在Next.js（React生态）里，直接用document.getElementById操作DOM不是最优的做法，React提供了useRef钩子来更安全地访问DOM元素，推荐你用这个方式，代码更符合React的组件思维，也能避免一些潜在问题：

import Head from 'next/head'
import { useRef } from 'react' // 先导入useRef

export default function Home() {
  // 创建一个ref对象，用来关联audio元素
  const audioRef = useRef(null)

  function play() {
    // 先判断ref是否已经关联到真实DOM元素，避免报错
    if (audioRef.current) {
      audioRef.current.play();
    }
  }

  return (
    <div className='home'>
      <Head>
        <title>Create Next App</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <div className='container'>
        <div className='col'>
          <button onClick={play}>Click</button>
          {/* 把ref绑定到audio元素上 */}
          <audio ref={audioRef} src='/static/src.mp3'></audio>
        </div>
      </div>
    </div>
  );
}

额外说明： #

• useRef创建的对象会在组件的整个生命周期内保持引用，不会像普通变量那样在每次渲染时重置。
• 添加if (audioRef.current)的判断是为了防止组件还没挂载完成时就调用play函数（此时ref.current还是null），避免控制台报错。

内容的提问来源于stack exchange，提问作者Mac Dev