React.js中如何实现音频播放结束时自动将toggle按钮置为关闭状态

核心依赖HTML Audio元素自带的ended事件，该事件会在音频播放完成时自动触发，监听事件后重置toggle对应的状态即可解决问题，同时你提供的原始代码存在几处可优化的问题，修改后的完整实现如下：

修正/新增逻辑说明 #

• 修复React导入语法错误，React为默认导出不需要写在大括号内，新增useEffect用于组件卸载时的资源清理
• 修复大写Import的语法错误
• 创建音频实例前先销毁之前的实例，避免多音频同时播放
• 给音频实例绑定ended事件，播放完成后自动重置activeSong状态为false，同步更新toggle按钮状态
• 新增组件卸载时的音频资源销毁逻辑，避免内存泄漏

import React, { useState, useEffect } from 'react';
import './playSong.css';
import music from './THREE.mp3';

const PlaySong = () => {
  const [activeSong, setActiveSong] = useState(false);
  const [saveSong, setSaveSong] = useState({});

  const drake = {
    value: 3,
    name: 'Energy',
    artist: 'Drake',
    audio: music,
  };

  // 组件卸载时清理音频资源
  useEffect(() => {
    return () => {
      if (saveSong instanceof Audio) {
        saveSong.pause();
        saveSong.removeEventListener('ended', () => {});
        saveSong.src = '';
      }
    }
  }, [saveSong]);

  function handlePlayPause() {
    const states = !activeSong;
    setActiveSong(states);

    if (states) {  
      playSong(drake);
    } else {
      togglePause(saveSong);
    }
  }

  function playSong(drake) {
    // 销毁之前存在的音频实例，避免多轨播放
    if (saveSong instanceof Audio) {
      saveSong.pause();
      saveSong.src = '';
    }
    const song = new Audio(drake.audio);
    // 监听播放完成事件，重置toggle状态
    song.addEventListener('ended', () => {
      setActiveSong(false);
      setSaveSong({});
    });
    song.play();
    setSaveSong(song);
    return song;
  }

  function togglePause(saveSong) {
    if (saveSong instanceof Audio) {
      saveSong.pause();
      // 暂停时清除事件避免残留
      saveSong.removeEventListener('ended', () => {});
      setSaveSong({});
    }
  }

  return (
    <div className="container">
      <div className="button r" id="button-4">    
        <input type="checkbox" className="checkbox" onChange={handlePlayPause} checked={activeSong} />
        <div className="knobs" />
        <div className="layer" />
      </div>
    </div>
  )
}

export default PlaySong

内容的提问来源于stack exchange，提问作者H. Sayouf