当前位置：首页 > React

react如何播放音乐

2026-03-11 08:14:00React

使用 HTML5 Audio 元素

在 React 中直接使用 HTML5 的 <audio> 元素是最基础的方法。通过 useRef 钩子可以获取 DOM 节点并控制播放。

import React, { useRef } from 'react';

function AudioPlayer() {
  const audioRef = useRef(null);

  const playAudio = () => {
    audioRef.current.play();
  };

  const pauseAudio = () => {
    audioRef.current.pause();
  };

  return (
    <div>
      <audio ref={audioRef} src="your-audio-file.mp3" />
      <button onClick={playAudio}>Play</button>
      <button onClick={pauseAudio}>Pause</button>
    </div>
  );
}

使用第三方库 react-audio-player

react-audio-player 提供了更 React 友好的组件化解决方案，内置播放控制 UI。

import React from 'react';
import ReactAudioPlayer from 'react-audio-player';

function AudioPlayer() {
  return (
    <ReactAudioPlayer
      src="your-audio-file.mp3"
      controls
    />
  );
}

实现自定义播放器

通过 useState 和 useEffect 构建自定义播放逻辑，适合需要深度定制的场景。

import React, { useState, useEffect } from 'react';

function CustomAudioPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);
  const [audio] = useState(new Audio('your-audio-file.mp3'));

  useEffect(() => {
    return () => {
      audio.pause(); // 组件卸载时停止播放
    };
  }, [audio]);

  const togglePlay = () => {
    if (isPlaying) {
      audio.pause();
    } else {
      audio.play();
    }
    setIsPlaying(!isPlaying);
  };

  return (
    <div>
      <button onClick={togglePlay}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  );
}

处理跨浏览器兼容性

不同浏览器对音频格式的支持存在差异，建议提供多种格式的备用源。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  您的浏览器不支持音频元素。
</audio>

添加播放进度控制

通过 timeupdate 事件和 currentTime 属性实现进度条交互。

react如何播放音乐

function ProgressAudioPlayer() {
  const [progress, setProgress] = useState(0);
  const audioRef = useRef(null);

  const handleTimeUpdate = () => {
    const current = audioRef.current.currentTime;
    const duration = audioRef.current.duration || 1;
    setProgress((current / duration) * 100);
  };

  return (
    <div>
      <audio
        ref={audioRef}
        src="audio.mp3"
        onTimeUpdate={handleTimeUpdate}
        controls
      />
      <input
        type="range"
        value={progress}
        onChange={(e) => {
          const seekTime = (e.target.value / 100) * audioRef.current.duration;
          audioRef.current.currentTime = seekTime;
        }}
      />
    </div>
  );
}