如何解决 audio.play() 的问题？答案

【问题标题】：How to fix issue with audio.play()?如何解决 audio.play() 的问题？
【发布时间】：2019-01-30 06:12:44
【问题描述】：

我正在尝试使用 JavaScript 音频对象。我非常关注本指南：https://medium.com/@bryanjenningz/how-to-record-and-play-audio-in-javascript-faa1b2b3e49b。

在第 6 部分中，我应该在 Audio 对象上调用 play()，但我收到一条错误消息，上面写着“未捕获的 TypeError：audio.play 不是函数”，我不确定我做错了什么。有什么帮助吗？

编辑：到目前为止的代码：

import React, { Component } from 'react'

class Audio extends Component {

  constructor() {
    super();
    this.state = {
      showButton: true,
    };
  }

  recordAudio = () => {
    this.setState({ showButton: false })

    navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      this.setState({ mediaRecorder: new MediaRecorder(stream) })
      this.state.mediaRecorder.start();

      const audioChunks = [];

      this.state.mediaRecorder.addEventListener("dataavailable", event => {
        audioChunks.push(event.data);
      });

      this.state.mediaRecorder.addEventListener("stop", () => {
        const audioBlob = new Blob(audioChunks);
        const audioUrl = URL.createObjectURL(audioBlob);
        const audio = new Audio(audioUrl);
        console.log(audio);
        audio.play();
      });
    });
  }

  stopRecording = () => {
    this.setState({ showButton: true })
    this.state.mediaRecorder.stop();
  }

  render() {
    return (
      <div>

      {/* This is a ternary operator that changes the button that is shown  */}
      {
        this.state.showButton ?
        <button type="button" onClick={this.recordAudio}> Start Recording </button> :
        <button type="button" onClick={this.stopRecording}> Stop Recording </button>
      }

      </div>

    )
  }

}

export default Audio;

编辑：console.log(audio) 输出：

Audio {props: undefined, context: undefined, refs: {…}, updater: {…}, recordAudio: ƒ, …}
    context:undefined
    props:undefined
    recordAudio:ƒ ()
    refs:{}
    state:{showButton: true}
    stopRecording:ƒ ()
    updater:{isMounted: ƒ, enqueueForceUpdate: ƒ, enqueueReplaceState: ƒ, enqueueSetState: ƒ}
    isMounted:(...)
    replaceState:(...)
    __proto__:ReactComponent

【问题讨论】：

请提供您目前编写的代码。
console.log(audio) 返回什么？
感谢您更新您的帖子。正如 Misha 提到的，console.log(audio) 输出什么？
我已经添加了 console.log(audio) 输出。您对可能出现的问题有任何想法吗？
在这种情况下，Audio 是您的组件的类，而不是默认的 window.Audio 构造函数。因此，最好的办法是将您的课程重命名为更具体的名称。另一个不太好的解决方案可能是调用window.Audio如果你没有用你的类覆盖它。一个同样不太好的解决方案是调用audio = document.createElement('audio'); audio.preload = 'auto'; audio.src = url，因为这是默认音频所做的。

标签： javascript html audio typeerror

【解决方案1】：

Kaiido 的评论为我解决了这个问题。由于我将我的类命名为“Audio”并调用了“Audio”构造函数（当我以为我在调用 window.Audio 时），所以它没有创建适当的对象。

根据他们的解决方案，要么重命名类，调用 window.Audio，要么调用他们评论中详述的默认 window.Audio 功能。

【讨论】：