在reactjs中播放声音 [英] Playing sound in reactjs

问题描述

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

这是我用来在我的反应应用程序中用url（this.url）播放声音的代码。当我按下播放按钮时，它会给我一个错误

This is the code that I am using to play the sound with url (this.url) in my react app. When I press the play button, it gives me an error

未捕获的TypeError：无法读取未定义的属性'setState'

我不确定为什么这是开心的，因为我没有看到任何未定义的状态。一个;;国家已被宣布。

I am not sure why this is happpening since I don't see any undefined states. A;; states have been declared.

我是新来的，所以我可能会遗漏一些非常重要的事情。

I am new to react so I might be missing something very important.

请帮助！

推荐答案

你需要绑定播放和暂停构造函数中的方法，以便在这些方法中使用的 this 引用组件的实例。

You need to bind both play and pause methods in your constructor so that the this used within either of these methods refers to the instance of the component.

在退出构造函数之前添加这两行：

Add these two lines just before exiting your constructor:

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

此外，这不是你的问题，你可以真正缩短你的代码，有很多那里的冗余。类似于：

Also, but this is not really your question, you could really shorten your code, there's a lot of redundancy in there. Something like:

编辑：更新为使用ES6类属性语法

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;

Hooks版本（React 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;

这篇关于在reactjs中播放声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！