오디오 가져오기 시간 방법 (react)

1695 단어 jsreactvideo

방법1:audio 탭을 만들고 재생 후duration을 가져옵니다.

let audioE = document.createElement("audio"); //  
audioE.src = configUrl.photoUrl + res.key;
audioE.load();
audioE.oncanplay = function () {
    setTimeout(()=> {
        console.log(audioE.duration);                    
        _this.setState({                      
            viewAudio: configUrl.photoUrl + res.key,
            duration: audioE.duration,
            audioLoading: false,
        });
    }, 1500);
}

방법2:react의 플러그인'react-audio-player'를 사용합니다.


1, 설치 및 도입
import ReactAudioPlayer from 'react-audio-player';

2, 구성 요소 사용
{/* url*/} { this.state.site.enAudio ? ( { this.state.duration.enDuration = element }} ref={(element) => { this.setState({duration: element})}} // ref={(element) => { this.state.duration = element }} src={this.state.site.enAudio} onCanPlay={this.onCanPlay} /> ) : null }

3, 오디오 주소 가져오기
site: {
    ..._this.state.site,
    enAudio: global.config.photoUrl + res.key,
    enAudio_copy: res.key,
},

4, 오디오 재생:
onCanPlay = () => {      
    let duration = this.state.duration;        
    let enDuration = duration ? Math.round(duration.audioEl.duration) : null;
    this.setState({
        site: {
            ...this.state.site,
            enDuration: enDuration
        }
    })
};

5,// 오디오 길이는this.state.site.enDuration 

좋은 웹페이지 즐겨찾기