时间戳

首页 > 解决方案 > 改变反应组件中的声音

reactjs - 改变反应组件中的声音

问题描述

我想在使用打字稿的反应应用程序中在后台播放音乐，但是当在父节点中更改音乐时，子节点中的声音没有任何变化。

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
});

标签： reactjstypescripthtml5-audio

解决方案

解决使用refJSX 属性的问题

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
});

推荐阅读