HTMLAudioElement.currentTime не является функцией - PullRequest
Новая
       9

HTMLAudioElement.currentTime не является функцией

0 голосов
/ 09 февраля 2020

Я использую ползунок диапазона <input> внутри компонента React для очистки / поиска по элементу HTML5 <audio>.

см. Сокращенный код компонента: 

class Player extends Component {

  componentDidMount() {

    if(this.player) {
      this.player.addEventListener("timeupdate", e => {
        this.props.update_time(e.target.currentTime)
        this.props.set_duration(e.target.duration)
        this.timeBar.value = e.target.currentTime
      });

      this.timeBar.addEventListener("change", e => {
        console.log(this.player)
        this.player.currentTime(e.target.value)
      })
    }
  }


  render() {

      return (
        <div className="player">
        <input
          type="range"
          id="seek"
          defaultValue={this.props.time}
          max={this.props.duration}
          ref={ref => this.timeBar = ref}
        />
          <audio ref={ref => this.player = ref} >
            <source
              src={this.props.url}
              type="audio/mpeg"
            />
          </audio>
        </div>
      )
  }
}

Если я перемещаю ползунок (вызывая событие «изменения»), я получаю следующую ошибку: 

TypeError: this.player.currentTime is not a function

Однако, если я пытаюсь установить значение currentTime непосредственно в консоли на объект, возвращаемый console.log(this.player), прекрасно работает.

Я попробовал почти все и выдвинул идеи. Файл полностью загружен, сервер поддерживает потоковую передачу, объект this.player возвращается корректно, даже внутри прослушивателя событий.

Спасибо за помощь!

...