Question

我创建了一个create-react-app项目，我设法将jquery导入为$并在componentDidMount（）生命周期钩子中使用I，

在render（）方法中我有

00:35:01

状态

audio ref="bgAudio"
   source src={this.state.bgAudio}

我想在页面加载时调用音频文件播放1.作为背景音乐，我尝试使用

this.state{ bgAudio:"./bgAudio.mp3" }

但它接着

componentDidMount(){
 this.refs.bgAudio.play();
}

功能不起作用

P.S。我正在把它作为一个游戏。此外，我有几个按钮，onClick执行一个功能..我想如果你给我一个建议如何播放点击声音。谢谢。

Answer 1

尝试以下是我为其他答案创建的代码段可能会对您有所帮助。在此代码中，当页面加载时播放音频，您可以通过单击按钮

来停止它

//music
var audio = new Audio('http://www.sousound.com/music/healing/healing_01.mp3')
checksound();



function checksound() {

var myElement = document.getElementById("soundMenu");
  myElement.innerHTML = "Turn Sound " + (audio.paused ? "OFF" : "ON");

  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }

}

function myFunction() {


var myElement = document.getElementById("soundMenu");
  myElement.innerHTML = "Turn Sound " + (audio.paused ? "OFF" : "ON");

  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
}

<button id="soundMenu" onclick="checksound()">Play</button>
<input type="text" onkeypress="myFunction()" />

Answer 2

要播放背景音，请不要使用componentDidMount()。 <audio>允许我们以声明的方式使用这两个属性来执行此操作：

autoPlay：这首歌会在安装时播放。
loop：歌曲完成后会循环播放。

示例：

class App extends React.Component {
    render () {
        return (
            <div>
                <audio src={ audioURL } loop autoPlay />
            </div>
        )
    }
}

音频播放（）在create-react-app componentDidMount中没有响应

2 个答案: