实现:如何使用HTML和Javascript制作播放/暂停按钮?

时间:2022-08-23 22:39:48

I was wondering how to make a play/pause button. Currently have it working, HTML and JS is in the answer.

我想知道如何制作播放/暂停按钮。目前有它工作,HTML和JS是答案。

1 个解决方案

#1


0  

I used some other examples, and created this. Make sure that, if you use this, your HTML audio tag looks like this

我使用了其他一些例子,并创造了这个。请确保,如果您使用此标记,您的HTML音频标记将如下所示

<audio id="audio_core" autoplay="autoplay">
  <source src="audio/bgm.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Here's the button itself:

这是按钮本身:

<a href="javascript:void(0)" id="audiobutton" class="btn-floating btn-large waves-effect waves-light red" onclick="aud_play_pause()"><i id="icn" class="material-icons">pause</i></a>
<script>
function aud_play_pause() {
  var myAudio = document.getElementById("audio_core");
  if (myAudio.paused) {
    myAudio.play();
    $("#icn").text("pause");
  } else {
    myAudio.pause();
    $("#icn").text("play_arrow");
  }
}
</script>

Hope this helped!

希望这有帮助!

#1


0  

I used some other examples, and created this. Make sure that, if you use this, your HTML audio tag looks like this

我使用了其他一些例子,并创造了这个。请确保,如果您使用此标记,您的HTML音频标记将如下所示

<audio id="audio_core" autoplay="autoplay">
  <source src="audio/bgm.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Here's the button itself:

这是按钮本身:

<a href="javascript:void(0)" id="audiobutton" class="btn-floating btn-large waves-effect waves-light red" onclick="aud_play_pause()"><i id="icn" class="material-icons">pause</i></a>
<script>
function aud_play_pause() {
  var myAudio = document.getElementById("audio_core");
  if (myAudio.paused) {
    myAudio.play();
    $("#icn").text("pause");
  } else {
    myAudio.pause();
    $("#icn").text("play_arrow");
  }
}
</script>

Hope this helped!

希望这有帮助!