NextJS中ReactAudioPlayer自定义播放/暂停按钮失效问题排查

在NextJS应用中基于react-audio-player包自定义音频播放器组件，通过useState控制自定义播放/暂停按钮时，按钮可正常切换视觉状态，但无法触发音频播放或暂停。音频自动播放功能正常，说明音频源传递无误，请问问题出在哪里？

相关代码 #

function AudioPlayer(this: any, props: any) {
  const [isPlaying, setIsPlaying] = useState(false);

  const handlePlay = () => setIsPlaying(true);
  const handlePause = () => setIsPlaying(false);

<ReactAudioPlayer
      src={props.trackLink}
      controls={false}
      onPlay={() => handlePlay()}
      onPause={() => handlePause()}
      autoPlay={true}
    />
    {isPlaying ? (
      <button
        className="group h-12 w-12 rounded-full border-white bg-transparent duration-100 ease-in hover:bg-white"
        onClick={handlePause}
      >
        <svg
          width="10px"
          height="14px"
          viewBox="0 0 10 14"
          className="m-auto group-hover:invert"
        >
          <g
            id="Icon-Export"
            stroke="none"
            strokeWidth="1"
            fill="none"
            fillRule="evenodd" >
            
        </svg>
      </button>
    ) : (
      <button
        className="group h-12 w-12 rounded-full border-white bg-transparent duration-100 ease-in hover:bg-white"
        onClick={handlePlay}
      >
        <svg
          width="10px"
          height="14px"
          viewBox="0 0 10 14"
          className="m-auto group-hover:invert"
        >
          <g
            id="Icon-Export"
            stroke="none"
            strokeWidth="1"
            fill="none"
            fillRule="evenodd"
          >
          </g>
        </svg>
      </button>

问题核心 #

当前代码只更新了isPlaying的状态，没有实际调用音频元素的play()或pause()方法。自定义按钮的点击事件只是修改了状态变量，并没有和ReactAudioPlayer内部的原生audio元素产生交互，所以音频不会响应按钮操作。

解决步骤 #

1. 获取ReactAudioPlayer的引用：用useRef钩子获取组件实例，从而访问内部的原生audio元素。
2. 修改点击事件逻辑：在按钮点击时，通过引用调用音频元素的播放/暂停方法，同时同步更新状态。
3. 同步音频自身状态：确保音频自动播放或外部操作（如浏览器暂停）时，isPlaying状态能同步更新。

修改后的完整代码 #

import React, { useState, useRef } from 'react';
import ReactAudioPlayer from 'react-audio-player';

function AudioPlayer(props: { trackLink: string }) {
  const [isPlaying, setIsPlaying] = useState(false);
  // 创建ref指向ReactAudioPlayer组件
  const audioPlayerRef = useRef<ReactAudioPlayer>(null);

  const handlePlayPause = () => {
    if (!audioPlayerRef.current) return;
    // 获取原生audio元素
    const audioElement = audioPlayerRef.current.audioEl.current;
    if (!audioElement) return;

    isPlaying ? audioElement.pause() : audioElement.play();
  };

  // 同步音频自身的播放状态变化
  const handlePlay = () => setIsPlaying(true);
  const handlePause = () => setIsPlaying(false);

  return (
    <div>
      <ReactAudioPlayer
        ref={audioPlayerRef} // 绑定ref
        src={props.trackLink}
        controls={false}
        onPlay={handlePlay}
        onPause={handlePause}
        autoPlay={true}
      />
      <button
        className="group h-12 w-12 rounded-full border-white bg-transparent duration-100 ease-in hover:bg-white"
        onClick={handlePlayPause}
      >
        <svg
          width="10px"
          height="14px"
          viewBox="0 0 10 14"
          className="m-auto group-hover:invert"
        >
          {isPlaying ? (
            // 暂停图标路径
            <g id="Icon-Export" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
              <rect fill="#FFFFFF" x="0" y="0" width="3" height="14" rx="1.5"/>
              <rect fill="#FFFFFF" x="7" y="0" width="3" height="14" rx="1.5"/>
            </g>
          ) : (
            // 播放图标路径
            <g id="Icon-Export" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
              <polygon fill="#FFFFFF" points="0 0 10 7 0 14"/>
            </g>
          )}
        </svg>
      </button>
    </div>
  );
}

export default AudioPlayer;

关键说明 #

• audioPlayerRef.current.audioEl.current：react-audio-player内部通过audioEl这个ref保存原生audio元素，需要通过两层ref获取到它。
• 合并播放/暂停逻辑：用一个函数处理按钮点击，根据当前状态调用对应的音频方法，简化代码。
• 状态同步：保留onPlay和onPause回调，确保音频自身状态变化时，按钮视觉状态能同步更新。

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