Почему не работает audio.pause() у класса Audio?

Question

[Hahahahh]

Создал объект класса Audio, пытаюсь как-то им манипулировать, но вот audio.pause на удивление не работает.

let audio = new Audio('data/CrooksUK-AFewPeacefulDays.mp3')
    if (this.props.status) {
      audio.play()
    }
    if (this.props.status == false) {
      audio.pause()
    }

Answer 1

[0xD34F]

А что это вы такое показали? - насколько я понял, огрызок какого-то метода. При каждом вызове создаётся новый объект audio, и работаете вы только с ним, в то время как доступ к предыдущему потерян после окончания предыдущего же вызова. Надо этот audio куда-то сохранять, чтобы иметь доступ между вызовами метода.

Comments

[Hahahahh]

Для полноты картины.

import React from 'react'
import { connect } from 'react-redux'
import { play, pause } from '../actions/Pauseplay.js'

class Player extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      flag: true
    }
  }

  handleClick = () => {
    this.setState({flag: !this.state.flag})
  }

  render() {
    let audio = new Audio('data/CrooksUK-AFewPeacefulDays.mp3')
    if (this.props.status) {
      audio.play()
    }
    if (this.props.status == false) {
      audio.pause()
    }
    return (<div className = "player_icons">
            <i className = "fa fa-step-backward fa-2x" aria-hidden = "true"></i>
            <div onClick = {this.handleClick}>
            {this.state.flag ? (<i className = "fa fa-play fa-2x" onClick = {this.props.play} aria-hidden = "true"></i>)
            :(<i className = "fa fa-pause fa-2x" onClick = {this.props.pause} aria-hidden = "true"></i>)}
            </div>
            <i className = "fa fa-step-forward fa-2x" aria-hidden = "true"></i>
            </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    status: state.music.isPlaying
  }
}

export default connect(mapStateToProps, { play, pause })(Player)

[0xD34F]

Как-то странно. Вызовы play и pause осуществляются в зависимости от значения status, а выбор отображаемой кнопки находится в зависимости от значения flag. Так кто у вас отвечает за воспроизведение - status или flag? Впрочем, неважно - знать я этого не желаю, разбирайтесь сами, вам виднее. Буду считать, что flag.

Делаете audio частью state (или просто свойством компонента), а возню с play/pause из render уносите в componentDidUpdate:

componentDidUpdate(prevState) {
  if (prevState.flag !== this.state.flag) {
    this.audio[this.state.flag ? 'play' : 'pause']();
  }
}

[Hahahahh]

0xD34F, flag просто отвечает за то, какую иконку показывать(паузы или проигрывания), а status это состоянии из стора. Для того чтобы audio сделать частью state, нужно сделать примерно что-то такое?

constructor(props){
    super(props);
    this.state = {
      flag: true,
      audio: ''
    }
  }

  componentDidMount() {
    this.setState({audio: document.getElementById('audio-player')})
  }

[0xD34F]

Можно конечно и так, только это дичь какая-то. Давайте лучше что-то такое сделаем:

class Player extends React.Component {
  state = {
    // к чёрту flag, давайте более понятное имя использовать
    isPlaying: false
  }

  componentDidMount() {
    // пусть путь к файлу будет задаваться извне компонента
    this.audio = new Audio(this.props.src);
  }

  componentDidUpdate(prevState) {
    if (prevState.isPlaying !== this.state.isPlaying) {
      this.audio[this.state.isPlaying ? 'play' : 'pause']();
    }
  }

  onClick = () => {
    this.setState({
      isPlaying: !this.state.isPlaying
    });
  }

  render() {
    return (
      <div onClick={this.onClick}>
        <i className={`fa fa-${this.state.isPlaying ? 'pause' : 'play'} fa-2x`}></i>
      </div>
    );
  }
}

[Hahahahh]

0xD34F, все, допилил, спасибо большое)