Question

正如标题所示，我的网站会自动播放音频，有些访问者建议我为其创建一个暂停按钮。在尝试了许多基于在线javascript的解决方案后，我没有成功。我使用以下代码播放音频：

<audio id= "song" autoplay loop onloadeddata="setHalfVolume()">
    <source src="song.mp3" type="audio/mpeg">
</audio>

Answer 1

将controls添加到代码<audio>

示例：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Answer 2

<强> HTML

<!-- add a button to control the audio -->
<button id="btn">Pause</button>

<强>的js

var btn = document.querySelector('#btn'),
    songAudio = document.querySelector('#song');

btn.addEventListener('click', function () {
    if (songAudio.paused) { // toggle the audio and button
        songAudio.play();
        btn.textContent = 'Pause';
    } else {
        songAudio.pause();
        btn.textContent = 'Play';
    }
}, false);

Answer 3

<强> HTML：

<audio controls="controls">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> element.
</audio>

来源：/

https://www.w3schools.com/html/html5_audio.asp https://developer.mozilla.org/en/docs/Web/HTML/Element/audio

<强> Jquery的;

$(function(){
 $('audio').click(function() {
   if (this.paused !== false) {
       this.play();
   } else {
       this.pause();
   }
 });
});

如何为<audio>或<video>等标记创建暂停按钮

3 个答案: