使用React

时间:2017-04-05 12:19:30

标签: javascript reactjs html5-audio

我有一个react组件,其中包含一个播放直播的Audio对象。当组件最初加载时,它开始播放,但是如果我卸载组件然后重新安装它,则播放按钮不起作用,并且流不会重新启动。

以下是组件和生命周期方法的代码:

import React from 'react'
import compose from 'recompose/compose'
import lifecycle from 'recompose/lifecycle'

const enhance = compose(
  lifecycle({
    componentDidMount() {
     this.audio = new Audio()
     this.audio.src = 'http://some-stream-url.com'
     this.audio.play()
     this.audio.muted = true
    },
    componentDidUpdate() {
     this.audio.muted = !this.props.playing
    },
    componentWillUnmount() {
     this.audio = ''
     this.audio = null
    }
 })
)

const Player = (props) => null

export default enhance(Player)

1 个答案:

答案 0 :(得分:1)

停止音频并重新开始当前时间。

componentWillUnmount() {
   this.audio.pause()
   this.audio.currentTime = 0
}