使用一个滑块控制全局音频/来自多个来源的音频。[React]

npx create-react-app audio-player
cd audio-player

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

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

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

  return (
    <div>
      <audio ref={audioRef} src="path_to_audio_file" />
      <button onClick={playPause}>{isPlaying ? 'Pause' : 'Play'}</button>
    </div>
  );
};

export default AudioPlayer;

import React from 'react';
import AudioPlayer from './AudioPlayer';

const App = () => {
  const audioSource = 'path_to_audio_file';

  return (
    <div>
      <h1>Audio Player</h1>
      <AudioPlayer audioSource={audioSource} />
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import AudioPlayer from './AudioPlayer';

const App = () => {
  const audioSource = 'path_to_audio_file';
  const [volume, setVolume] = useState(50);

  const handleVolumeChange = (e) => {
    setVolume(e.target.value);
  };

  return (
    <div>
      <h1>Audio Player</h1>
      <AudioPlayer audioSource={audioSource} volume={volume} />
      <input
        type="range"
        min="0"
        max="100"
        value={volume}
        onChange={handleVolumeChange}
      />
    </div>
  );
};

export default App;