1

我正在创建一个将使用 youtube API 的音乐播放器。现在我创建了一个名为MainPlayer.JS的播放器。进度条在适当的时间工作正常，但我无法添加寻找进度条来转发音乐的功能。进度条位于另一个名为SeekBar.JS的组件中。

谁能帮我弄清楚如何在我的音乐应用程序中添加搜索功能。我正在使用 React.JS 来构建项目。我正在将此包用于名为react-player的音乐播放器

MainPlayer.JS的代码是

import React, { useContext, useState, useRef } from 'react'
import ReactPlayer from 'react-player'

import Play from './Play'
import Pause from './Pause'
import Previous from './Previous'
import Next from './Next'
import Dark from './Dark'
import Light from './Light'
import SeekBar from './SeekBar'
import { TitleContext, IdContext, ImageContext, ChannelContext }
  from '../VideoContext';

function Player() {

  const { title, setTitle } = useContext(TitleContext);
  const { id, setId } = useContext(IdContext);
  const { image, setImage } = useContext(ImageContext);
  const { channel, setChannel } = useContext(ChannelContext);

  const url = `https://www.youtube.com/watch?v=${id}`;

  const [playing, setPlaying] = useState(false)
  const [rotate, setRotate] = useState(false)
  const [dark, setDark] = useState(false)
  const [played, setPlayed] = useState(0.00)
  const [duration, setDuration] = useState(0.0)
  /*const [loaded,setLoaded] = useState(0)*/
  const [seeking,setSeeking] = useState(false)

  //Play
  const handlePlay = () => {
    setPlaying(true)
    setRotate(true)
  }
  //Pause
  const handlePause = () => {
    setPlaying(false)
    setRotate(false)
  }
  //Play or Pause
  const handlePlayPause = () => {
    if (playing === true)
      handlePause()

    else
      handlePlay()
  }
  // Toggle Theme
  const toggleTheme = () => {
    if (dark === true) {
      setDark(false)
    }
    else {
      setDark(true)
    }
  }

  const musicPlayer = useRef(null);
  return (
    <div className={dark ? "playerlight" : "playerdark"}>

      <div onClick={toggleTheme} className="themeIcon">
        {dark ? <Dark /> : <Light />}
      </div>

      <div style={{ 'display': 'none' }}>
        <ReactPlayer ref={musicPlayer} url={url} playing={playing}
          onReady={handlePlay} onEnded={handlePause}
          onProgress={e => { setPlayed(e.playedSeconds) }}
          onDuration={e => { setDuration(e) }} 
          onSeek={e => console.log(e)}/>
      </div>
      <img src={image} id="playerImage" className={rotate ? "rotate" : ""} />

      <div className='songData'>
        <span style={{ marginLeft: '-4vh' }}>Song :&nbsp;</span>
        <b>{title}</b>
      </div>
      <div className='songData'>
        <span style={{ marginLeft: '-4vh' }}>Channel :&nbsp;</span>
        <b>{channel}</b>
      </div>
      <div>
        <SeekBar played={played} duration={duration} setPlayed={setPlayed}/>

      </div>
      <div>
        <Previous/>
        <Next/>
        <div onClick={handlePlayPause} className="playPause">
          {playing ? <Pause /> : <Play />}
        </div>
      </div>
    </div>
  )
}

export default Player

SeekBar.JS的代码是

        import React from 'react'

    function SeekBar({ played, duration,setPlayed }) {

        const secToHHMMSS = (secs) => {

            const pad = (num) => {
                return ("0" + num).slice(-2);
            }
            var minutes = Math.floor(secs / 60);
            secs = secs % 60;
            var hours = Math.floor(minutes / 60)
            minutes = minutes % 60;
            if(hours === 0) {return `${pad(minutes)}:${pad(secs)}`;}
            else if(hours !== 0){return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;}
        }
        var newPlayed = secToHHMMSS(Math.round(played));
        var newDuration = secToHHMMSS(duration);
        return (
            <div style={{ marginBottom: '10vh' }}>

                <input style={{ width: '90%', margin: '0 5% 0 5%', height: '2px',borderRadius:'10%' }} className="slider"
                type='range' min={0} value={Math.round(played)} max={duration} 
                onChange={e => setPlayed(e.target.value)}/>

                <span style={{ float: 'left', marginLeft: '5%', marginTop:'3%' }}>{newPlayed}</span>
                <span style={{ float: 'right', marginRight: '5%', marginTop:'3%' }}>{newDuration}</span>
            </div>
        )
    }

    export default SeekBar
4

0 回答 0