javascript - 使用JS变量(ubernewb)进行音频暂停/播放-6ren

javascript - 使用JS变量(ubernewb)进行音频暂停/播放

转载作者：行者123 更新时间：2023-12-03 02:08:26

我正在一个简单的项目中，在侧边栏中包含一个媒体(mp3)播放器。我可以使用播放/暂停按钮进行视觉切换，也可以通过将href分配给另一个图像来关闭音频，但是当尝试使用交换的图像来暂停音频时，我似乎无法弄清楚，这是我的代码..

编辑:删除shotty代码

编辑:找出了三种方法来做到这一点，下面的两种人发布了很棒的方法，但我也想出了如何通过jquery粗略地做到这一点。

$('#left-05-pause_').click(function(){
    $('#left-05-pause_').hide();
    $('#left-05-play_').show();
    }); 

$('#left-06-audio_').click(function(){
    audio.volume = 1;
    $('#left-06-audio_').hide();
    $('#left-06-mute_').show();
    });

最佳答案

米奇，我为您提供三点:

无需将<a>包裹在<img>周围

可以提高性能，避免过度选择元素(例如getElementById)，因为一旦选择了元素链接，就将其放入变量中，然后再次使用它来访问相同的元素

使用有关元素状态的本地信息(在此示例中为<audio>)-探索其属性

总之，请尝试下一个示例(为清楚起见，文件名已更改):

<body>
  <audio id="audioId">
    <source src="song.mp3" type="audio/mp3" />
  </audio>
  <img id="imageId" src="play.png" onclick="toggle()" />
  <script>
    var audio = document.getElementById( 'audioId' )
      , image = document.getElementById( 'imageId' )

    function toggle()
    {
      if ( audio.paused )
      {
        image.src = 'pause.png'
        audio.play()
      }
      else
      {
        image.src = 'play.png'
        audio.pause()
      }
    }
  </script>  
</body>