Одна аудиозапись за раз Nextjs - PullRequest
Новая
       3

Одна аудиозапись за раз Nextjs

0 голосов
/ 02 марта 2020

Я использую react-use-audio-player для своего проекта, и мне нужно воспроизводить только один звук за раз. У меня есть несколько од ios на одной странице. В настоящее время все aud ios находятся в состоянии паузы при загрузке, что мне и нужно. Но во время воспроизведения аудио, и я нажимаю на следующий звук без паузы, первый перекрывается друг с другом. Я добавил мой код ниже для вашей справки. Ценю, если кто-нибудь может мне помочь.

Здесь мой pages/index.js

import React from 'react'
import { AudioPlayerProvider } from 'react-use-audio-player'
import AudioPlayer from '../../../components/AudioPlayer'

const Home = () => {

  return (
    <>
     <ul>
      <li>
            <div className='color_c uk-flex uk-flex-middle uk-flex-center uk-text-center'>
              <div>
                <AudioPlayerProvider>
                  <AudioPlayer file='../../../projectFolder/audio/c_chai-yi-ning_90s.mp3' playButton='/projectFolder/img/icon_play_c.svg' pauseButton='/projectFolder/img/icon_pause_c.svg' />
                </AudioPlayerProvider>
                <div className='uk-text-small'>Chai Yi Ning, 19</div>
              </div>
            </div>
          </li>
         <li>
            <div className='color_c uk-flex uk-flex-middle uk-flex-center uk-text-center'>
              <div>
                <AudioPlayerProvider>
                  <AudioPlayer file='../../../projectFolder/audio/c_chai-yi-ning_90s.mp3' playButton='/projectFolder/img/icon_play_c.svg' pauseButton='/projectFolder/img/icon_pause_c.svg' />
                </AudioPlayerProvider>
                <div className='uk-text-small'>Ying Ming, 54</div>
              </div>
            </div>
          </li>
         <li>
            <div className='color_c uk-flex uk-flex-middle uk-flex-center uk-text-center'>
              <div>
                <AudioPlayerProvider>
                  <AudioPlayer file='../../../projectFolder/audio/c_chai-yi-ning_90s.mp3' playButton='/projectFolder/img/icon_play_c.svg' pauseButton='/projectFolder/img/icon_pause_c.svg' />
                </AudioPlayerProvider>
                <div className='uk-text-small'>Lee Chong Wie, 29</div>
              </div>
            </div>
         </li>
     </ul>
    </>
  )
}

export default Home

Здесь мой components/AudioPlayer.js

import React from 'react'
import { useAudioPlayer } from 'react-use-audio-player'

const AudioPlayer = ({ file, playButton, pauseButton }) => {
  const { play, pause, ready, loading, playing } = useAudioPlayer({
    src: file,
    format: 'mp3',
    autoplay: false
  })

  const togglePlay = () => {
    if (playing) {
      pause()
    } else {
      play()
    }
  }

  if (!ready && !loading) return <div>No audio to play</div>
  if (loading) return <div>Loading audio</div>

  return (
    <>
      <img src={!playing ? playButton : pauseButton} onClick={togglePlay} className='uk-width-2-3' style={{ cursor: 'pointer' }} />
    </>
  )
}

export default AudioPlayer

1 Ответ

0 голосов
/ 03 марта 2020

Добавление метода жизненный цикл решит проблему каждый раз, когда компонент размонтирует вызов return , поэтому если Вы меняете песни, затем блок return проверит, воспроизводится ли звук, и приостановит песню, а затем будет воспроизведена следующая песня. 

   import React,{useEffect} from 'react'

    useEffect(()=>{
    return (()=>{
    if (playing) {
      pause()} })
    },[file])
...