import React, { Component } from 'react'
import { Button, Input, Icon,Dropdown,Card} from 'semantic-ui-react'
import { Link } from 'react-router-dom'
import $ from 'jquery'
import styles from './Home.scss'
import Modal from './Modal.jsx'
import MakeChannelModal from './MakeChannelModal.jsx'

class Music extends React.Component {
    constructor(props) {
    super(props);
    this.state = {

      play: false,
      pause: true

    };

    this.url = "http://streaming.tdiradio.com:8000/house.mp3";
    this.audio = new Audio(this.url);

  }

  play(){
    this.setState({
      play: true,
      pause: false
    });
    console.log(this.audio);
    this.audio.play();
  }

  pause(){
  this.setState({ play: false, pause: true });
    this.audio.pause();
  }

  render() {

  return (
    <div>
      <button onClick={this.play}>Play</button>
      <button onClick={this.pause}>Pause</button>
    </div>
    );
  }
}


export default Music

Este es el código que estoy utilizando para reproducir el sonido con la dirección url (esto.url) en mi reaccionan de la aplicación. Cuando presione el botón de play, me da un error

Uncaught TypeError: Cannot read property 'setState' of undefined

No estoy seguro de por qué esto es happpening ya que no veo ninguna indefinido de los estados. A;; los estados han sido declaradas.

Soy nuevo en reaccionar, así que puede ser que falte algo muy importante.

Por favor ayuda!

InformationsquelleAutor Dawn17 | 2017-12-07

1 Comentario

  1. 27

    Usted necesita para unirse ambos play y pause métodos en el constructor para que el this utilizado dentro de cualquiera de estos métodos se refiere a la instancia del componente.

    Añadir estas dos líneas justo antes de salir de su constructor:

    this.play = this.play.bind(this);
    this.pause = this.pause.bind(this);

    También, pero esto no es realmente su pregunta, usted realmente podría acortar su código, hay una gran cantidad de redundancia en allí. Algo así como:

    Edit: actualizado para utilizar ES6 propiedades de la clase de sintaxis

    class Music extends React.Component {
      state = {
        play: false
      }
      audio = new Audio(this.props.url)
    
      togglePlay = () => {
        this.setState({ play: !this.state.play }, () => {
          this.state.play ? this.audio.play() : this.audio.pause();
        });
      }
    
      render() {
        return (
          <div>
            <button onClick={this.togglePlay}>{this.state.play ? 'Pause' : 'Play'}</button>
          </div>
        );
      }
    }
    
    export default Music;

    Ganchos versión (Reaccionar 16.8+):

    import React, { useState, useEffect } from "react";
    
    const useAudio = url => {
      const [audio] = useState(new Audio(url));
      const [playing, setPlaying] = useState(false);
    
      const toggle = () => setPlaying(!playing);
    
      useEffect(
        () => {
          playing ? audio.play() : audio.pause();
        },
        [playing]
      );
    
      return [playing, toggle];
    };
    
    const Player = ({ url }) => {
      const [playing, toggle] = useAudio(url);
    
      return (
        <div>
          <button onClick={toggle}>{playing ? "Pause" : "Play"}</button>
        </div>
      );
    };
    
    export default Player;
    • eres bienvenido – hizo un par de cambios en el código en el ínterin, si eso ayuda 😉
    • Gracias que podría ayudar! Btw, estoy finalmente tratando de implementar una lista de música. Así, yo podría hacer el this.url como un [ ] de direcciones url de archivos mp3. ¿Crees que va a ser factible para reproducir la canción de forma secuencial?
    • Yo no sé acerca de la capacidad para el audio para reproducir una secuencia de fuentes – vas a tener que buscar la documentación de lo que sea objeto de audio/biblioteca está utilizando. Me gustaría, sin embargo, el movimiento que la lista de direcciones Url en el interior del estado y gestionar desde allí (y también tiene una variable de estado denominado currentUrl), e implementar un next método para saltar de una dirección URL a la siguiente. Buena suerte!
    • En realidad, pensando que tendría más sentido para pasar la lista de direcciones Url como un accesorio para su componente, como <Music playlist={urls} /> donde urls es su matriz. A continuación, la lista de direcciones url disponible en el componente bajo this.props.playlist. Y en el estado podría rastrear la URL de la página actual que se está jugando como this.state.current.
    • Gracias por lo que tiene sentido! Por cierto, ¿tiene usted una idea de cómo detener la música en lugar de detenerse?
    • Permítanos continuar esta discusión en el chat.

Dejar respuesta

Please enter your comment!
Please enter your name here