当前位置：首页 > React

react如何播放音乐

2026-01-24 23:23:10React

使用 HTML5 Audio 元素

在 React 中播放音乐可以通过 HTML5 的 <audio> 元素实现。创建一个状态来控制音频的播放和暂停。

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

function AudioPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef(null);

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

  return (
    <div>
      <audio ref={audioRef} src="your-music-file.mp3" />
      <button onClick={togglePlay}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  );
}

export default AudioPlayer;

使用第三方库 react-audio-player

对于更复杂的需求，可以使用 react-audio-player 库。安装后直接引入组件即可。

npm install react-audio-player

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

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

export default AudioPlayer;

使用 Web Audio API

Web Audio API 提供更底层的音频控制，适合需要高级功能的场景。

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

function AudioPlayer() {
  const [audioContext, setAudioContext] = useState(null);
  const [source, setSource] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    const context = new (window.AudioContext || window.webkitAudioContext)();
    setAudioContext(context);
    return () => context.close();
  }, []);

  const togglePlay = async () => {
    if (isPlaying) {
      source.stop();
      setIsPlaying(false);
    } else {
      const res = await fetch('your-music-file.mp3');
      const buffer = await res.arrayBuffer();
      const decodedBuffer = await audioContext.decodeAudioData(buffer);
      const newSource = audioContext.createBufferSource();
      newSource.buffer = decodedBuffer;
      newSource.connect(audioContext.destination);
      newSource.start();
      setSource(newSource);
      setIsPlaying(true);
    }
  };

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

export default AudioPlayer;

使用自定义 Hook

封装一个自定义 Hook 来复用音频播放逻辑。

import { useState, useRef } from 'react';

function useAudioPlayer(src) {
  const audioRef = useRef(new Audio(src));
  const [isPlaying, setIsPlaying] = useState(false);

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

  return { isPlaying, togglePlay };
}

function AudioPlayer() {
  const { isPlaying, togglePlay } = useAudioPlayer('your-music-file.mp3');

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

export default AudioPlayer;

react如何播放音乐