如何解決audio.play（）的問題？ 在React中

Question

我試圖在React中實現一個帶有一些聲音的按鈕，但是我得到的'TypeError: audio.play is not a function' ： 'TypeError: audio.play is not a function'

我試圖創建元素並通過id來獲取它，以及嘗試使用帶有new Audio(src)純js。 在這兩種情況下，我都會出錯。 我在網上檢查了數百個示例，它們都以相同的方式進行操作，但不知為何我的方法不起作用

import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
import OctagonalButton from "./OctagonalButton";
import  "../../css/buttons/HeroButtons.css";
// import soundfile from "../../internalAsset/sounds/button-1.mp3";
class HeroButtons extends Component {
  constructor(props) {
    super(props);
    this.state = { fadeIn: false, hover: false };
  }

  componentDidMount() {
    this.setState({ fadeIn: true });
    // we add the even listener to buttons
    setTimeout(() => {
      // we add the even listener to buttons
      var button1 = document.querySelector("#HerofindMore1");
      button1.addEventListener("mouseenter", () => {
        this.toggleHover();
      });
      button1.addEventListener("mouseleave", () => {
        this.toggleHover();
      });
      var button2 = document.querySelector("#HerofindMore2");
      button2.addEventListener("mouseenter", () => {
        this.toggleHover();
      });
      button2.addEventListener("mouseleave", () => {
        this.toggleHover();
      });
    }, 600);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.hover !== this.state.hover) {
      if (this.state.hover) {
        // on onMouseEnter we play the Sund
        this.Sound("play");
      } else {
        // if onMouseLeave we stop the sound
        this.Sound("stop");
      }
    }
  }

  handleClick = () => {
    // send the unmounting notification to hero header
    this.props.alertHeroHeader();
    // let the transition do its job before unmount the component
    this.setState({ fadeIn: false });
    // unmount the component
    setTimeout(() => {
      this.props.onClick();
    }, 2000);
  };

  toggleHover = () => {
    this.setState({ hover: !this.state.hover });
  };

  Sound = value => {

    let audio = new Audio("../../internalAsset/sounds/button-1.mp3");

    if (value === "play") {
      console.log("Play");
      console.log(audio);
       audio.play();
    } else {
      audio.pause();
      console.log("Stop");
    }
  };

  render() {
    return (
      <div>        
        <CSSTransition
          in={this.state.fadeIn}
          timeout={{ enter: 500, exit: 500 }}
          classNames={{
            appear: "fade-appear",
            appearActive: "fade-active-appear",
            enter: "fade-enter",
            enterActive: "fade-enter-active",
            enterDone: "fade-enter-done",
            exit: "fade-exit",
            exitActive: "fade-exit-active",
            exitDone: "fade-exit-done"
          }}
          unmountOnExit
          onExited={() => {
            this.props.onClick();
          }}
        >
          <div className="buttonHeroWrapper">
            <OctagonalButton
              type="HeroButtonMore1"
              id="HerofindMore1"
              onClick={this.handleClick}
            />
            <OctagonalButton
              type="HeroButtonMore2"
              id="HerofindMore2"
              onClick={this.handleClick}
            />
          </div>
        </CSSTransition>
      </div>
    );
  }
}
export default HeroButtons;

這是音頻的console.log（）

Audio {name: "audio", uuid: "9B72D3F7-2A6E-459D-A144-285ABACE1B9A", type: "Audio", format: "arraybuffer", encoding: "mp3", …}
data: ArrayBuffer(1862) {}
encoding: "mp3"
format: "arraybuffer"
name: "audio"
type: "Audio"
uuid: "9B72D3F7-2A6E-459D-A144-285ABACE1B9A"
__proto__: Resource

先謝謝您的幫助！

Answer 1

我建議在按鈕組件上使用onMouseEnter和onMouseLeave道具，那么您無需在componentDidMount上附加事件。

我剛剛創建了一個示例，您可以在這里查看https://codesandbox.io/s/react-mdn-audio-ffgox

但是，如果您想繼續使用addEventListener ，則需要將箭頭功能更改為普通功能，因為this不會引用HeroButtons類。 嘗試這樣的事情：

button2.addEventListener("mouseleave", function() {
  this.toggleHover();
});

我鼓勵您使用帶有React鈎子的無狀態組件;）

Answer 2

好的，即使到目前為止我沒有得到任何幫助，我也解決了這個問題，我在這里與遇到問題的所有人分享。 希望會有所幫助。

由於某種原因，我不太清楚， new Audio(src)在React中不是一個可行的選擇，某種程度上， play()作為pause()功能不起作用。 因此，如果像我一樣遇到同樣的情況，請制作一個在渲染中帶有<audio>元素的組件。

<audio id="audio">
 <source src={src} type="audio/mp3" />
</audio>

您可以使用以下方式播放（或暫停等）。

document.getElementById("audio").play();

因此，當您將鼠標懸停在所選擇的元素上時，只需在props中傳遞其css選擇器數組，即可在此處創建我的react組件來播放聲音：

import React, { Component } from "react";

import soundfile from "../../internalAsset/sounds/button-1.mp3";

class ButtonAudioPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    // we add the even listener to buttons

    this.props.buttonsSelectors.forEach(selector => {
      var button1 = document.querySelector(selector);
      button1.addEventListener("mouseenter", () => {
        this.sound("play");
      });
      button1.addEventListener("mouseleave", () => {
        this.sound("stop");
      });
    });
  }

  sound = value => {
    const track = document.getElementById("audio");
    if (value === "play") {
      track.load();
      track.play();
    } else {
      track.pause();
    }
  };

  render() {
    return (
      <audio id="audio">
        <source src={soundfile} type="audio/mp3" />
      </audio>
    );
  }
}
export default ButtonAudioPlayer;

希望對您有所幫助:)