изменить звук в компоненте реакции - PullRequest
Новая
       19

изменить звук в компоненте реакции

0 голосов
/ 08 мая 2019

Я хочу воспроизводить музыку в фоновом режиме в приложении реагирования с машинописью, но при смене музыки в родительском не происходит никаких изменений звука в дочернем узле. 

import React from 'react';
import './audioPlayer.css';

interface AudioPlayerProps {
  music: string
}

const AudioPlayer: React.FC<AudioPlayerProps> = ({ music }) => {

  return (
    <audio >
      <source src={music} type="audio/mpeg" />
      Your browser does not support the audio tag.
    </audio>
  );
};

export default React.memo(AudioPlayer,(prevProps, nextProps)=>{
  return prevProps.music === nextProps.music
});

1 Ответ

0 голосов
/ 08 мая 2019

решить проблему с использованием ref атрибута JSX 

import React, { useState, useEffect } from 'react';
import './audioPlayer.css';

interface AudioPlayerProps {
  music: string,
}

const AudioPlayer: React.FC<AudioPlayerProps> = ({ music}) => {

  const [audio, setAudio] = useState();

  useEffect(() => {
    if(audio){
       audio.pause();
       audio.load();
       audio.play();
    }
  }, [music,audio]);

  return (
    <audio ref={(audioref)=>{ setAudio(audioref) }} >
      <source src={music} type="audio/mpeg" />
      Your browser does not support the audio tag.
    </audio>
  );
};

export default React.memo(AudioPlayer,(prevProps, nextProps)=>{
  return prevProps.music === nextProps.music
});
...