使用 jquery 播放和暂停音频

Question

我有一个 ID 为“按钮”的按钮，单击该按钮会消失并播放音频，还有一个 div，其中包含在“fa-volume-up”和“fa-volume-mute”之间切换的字体真棒图标。

我的目标：我想在有人点击按钮时播放音频，同时包含“fa-volume-mute”的 div 更改为“fa-volume-up”。并且当有人点击“fa-volume-up”按钮重新出现。

//Hide button on click
    $(document).ready(function(){
    $('#button').click(function(){
        $('#button').hide();
    });
    if ($('i').hasClass('fas fa-volume-up')) {
        audio.pause()
    }else{

    }
});

//toggle class
    $('#song').click(function(){
        $(this).find('i').toggleClass('fas fa-volume-mute fas fa-volume-up');
    });
    $('i').click(function(){
        
    })

//On click Audio
    $(document).ready(function() {
  //Audio  Starts
  var audio = new Audio('/audio.mp3')
  $("#button").mousedown(function() {
    audio.load();
    audio.play();
  });
  //Audio Ends
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="song">
        <div id ="sound">
            <i class="fas fa-volume-mute" aria-hidden="true"></i>
        </div>
        <div>
            <button id="button">Click</button>
        </div>
</div>

你能帮帮我吗？

提前致谢！

Answer 1

要实现您的目标，您只需将所需的行为分解为多个步骤。首先，在其上启动一个audio 元素播放调用play()。要停止它，请致电pause()。要更改图标的类别，请使用toggleClass() 或removeClass() 和addClass() 的组合。要隐藏或显示元素，请使用 hide() 和 show()。

从那里，您只需要两个事件处理程序，一个在按钮上开始播放音频、更改图标并隐藏按钮，另一个在图标本身上以停止播放音频、更改图标并显示按钮。

请注意，在下面的示例中，使用了单个 document.ready 事件处理程序 (jQuery($) {})，并且所有代码都在其中。如果您不这样做，您可能会发现您的事件处理程序未正确绑定。 另请注意，依赖于事件处理程序的所有逻辑都在事件处理程序本身内。

jQuery($ => {
  $('.button').click(e => {
    let $song = $(e.target).hide().closest('.song');
    $song.find('.audio')[0].play();
    $song.find('.icon').toggleClass('fa-volume-mute fa-volume-up');
  });
  
  $('.song').on('click', '.fa-volume-up', e => {
    let $song = $(e.target).closest('.song');
    $song.find('.audio')[0].pause();
    $song.find('.icon').removeClass('fa-volume-up').addClass('fa-volume-mute');
    $song.find('.button').show();
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="song">
  <div class="sound">
    <i class="icon fas fa-volume-mute" aria-hidden="true"></i>
  </div>
  <div>
    <button class="button">Play</button>
  </div>
  <audio class="audio" src="https://webism.jp/media/jplayer/tw034.mp3" preload="auto"></audio>
</div>