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

Posted 2023-02-25

【中文标题】没有使用我的 JS 脚本暂停 HTML5 音频？

【英文标题】：HTML5 audio isn't paused using my JS script?

【发布时间】：2015-11-22 01:46:29

【问题描述】：

我在我的网站上添加了音频（自动播放）。还有一个音乐图标（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/

【问题讨论】：

能否提供音频的完整 URL 以在我的解决方案中进行测试？

好的，我通过网络检查器为需要它进行测试的其他人找到了它...freelancezonebd.com/jim/st/music/guitar.mp3

【参考方案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>

【参考方案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;

【参考方案3】：

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

试试

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

【参考方案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/

【讨论】：

是的，我明白了。其实我还没有让它响应。我刚刚检查了我的屏幕。 1920 完美。我现在正在努力使其具有响应性。