HTML5音频是't暂停使用我的JS脚本

HTML5 audio isn't paused using my JS script?

本文关键字：我的 JS 脚本 暂停 音频 HTML5      更新时间：2023-09-26

我在我的网站上添加了一个音频（自动播放）。还有一个音乐图标（字体真棒）。实际上我想暂停播放音乐，图标也应该同时切换。这是我的HTML标记：

<li class="music-icon">
<a href="#" onclick="pauseAudio()" >
<i class="fa fa-music"></i>
</a>
</li>
<audio autoplay loop id="myAudio">
    <source src="music/guitar.mp3">
</audio>

这是我的JS脚本：

(function(){
//audio Play and Pause
var audio = document.getElementById('myAudio');
$( ".music-icon a" ).click(function( event ) {
    //prevent a default
      event.preventDefault();
    //toggle font awesome icon (on/pause)
      $(this).find('i').toggleClass('fa-volume-off');
  });
//play/pause
function playAudio(){
    audio.play();
}
function pauseAudio(){
    audio.pause();
}
})();

以下是网站：http://www.freelancezonebd.com/jim/st/

这是我的代码，告诉我是否可以改进我的解决方案。如果您想要更准确的模拟，请包含您的CSS。

window.addEventListener('load', function() {
  var playing = true;
  var audio = document.getElementById('myAudio');
  document.getElementById('audioMusicToggle').onclick = function() {
    if (playing == true) {
      //pause the music
      audio.pause();
      playing = false;
    } else {
      audio.play();
      playing = true;
    }
  };
});
<!--http://www.freelancezonebd.com/jim/st/music/guitar.mp3-->
<li class="music-icon">
  <input type="button" id="audioMusicToggle" value="Play/Pause">
</li>
<audio autoplay loop id="myAudio" controls>
  <source src="http://www.freelancezonebd.com/jim/st/music/guitar.mp3">
</audio>

jsFiddle

JavaScript

var aIcon = document.querySelector('.music-icon a');
aIcon.addEventListener('click', function (event) {
    event.preventDefault();
    event.target = this;
    var aPlayer = document.getElementById('aPlayer');
    if (!aPlayer.paused) {
        aPlayer.pause();
        this.querySelector('i').classList.add('fa-music');
        this.querySelector('i').classList.remove('fa-volume-off');
    } else {
        aPlayer.play();
        this.querySelector('i').classList.add('fa-volume-off');
        this.querySelector('i').classList.remove('fa-music');
    }
}, false);

HTML

<li class="music-icon"><a href="#"><i class="fa fa-music"></i></a>
</li>
<!--change fa-music to fa-volume-off if autoplay-->
<audio loop id="aPlayer">
    <source src="https://glpjt.s3.amazonaws.com/so/av/111.mp3">
</audio>

CSS

li {
    list-style: none;
}

您可能想尝试直接获取元素

尝试

$("#audioContainer")[0].pause();

我终于使用了一些CSS技巧。现在音频具有控件属性。使用css，我只是使控件对图标透明。当点击透明音频控件时，图标会切换。标记：

<li class="music-icon">
  <a href="#"><i class="fa fa-music"></i></a>
  <audio autoplay loop id="myAudio" controls>
      <source src="music/guitar.mp3">
  </audio>

CSS：

/*Music*/
.music-icon {
  cursor: pointer;
  margin-right: 20px;
  overflow: hidden;
  position: relative;
  width: 30px;
}
audio#myAudio {
  left: 0;
  opacity: 0;
  padding-right: 10px;
  position: absolute;
  top: 12px;
}

和jQuery:

$('.music-icon').click(function(){
    $(this).find('a i').toggleClass('fa-volume-off');
});

也许这不是一个全球性的解决方案，但它对我有效。现在看看结果：http://www.freelancezonebd.com/jim/st/

相关文章：