没有使用我的 JS 脚本暂停 HTML5 音频？

Question

我在我的网站上添加了音频（自动播放）。还有一个音乐图标（fontawesome）。其实我想暂停和播放音乐，图标也应该同时切换。 这是我的 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/

Answer 1

这是我的代码，请告诉我是否可以改进我的解决方案。如果您想要更准确的模拟，请包含您的 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>

Answer 2

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;
}

Answer 3

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

试试

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

Answer 4

我终于使用了一些 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/