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



我正在做一个简单的项目,该项目在侧边栏中包含一个媒体(mp3)播放器。我可以让播放/暂停按钮进行视觉切换,也可以通过为另一个图像分配href来关闭音频。然而,当我试图让交换的图像暂停音频时,我似乎无法理解,这是我的代码。。

编辑:删除镜头代码

编辑:找到了三种方法,下面两个善良的人发布了很棒的方法,但我也找到了如何通过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();
    });
Mitch,我有三点要告诉你:
  • 不需要将CCD_ 1包裹在CCD_
  • 为了提高性能,请避免过度使用选择元素(如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>

你可以试试这个

<a href="#">
<img src="http://royaltrax.com/aadev/images/left/images/left_05.png" id="imgPauseChange" onclick="changeImage()">
</a>
<script language="javascript">
    function changeImage() {
        if (document.getElementById("imgPauseChange").src == "http://royaltrax.com/aadev/images/left/images/left_05.png")
        {
            document.getElementById("aud").play();
            document.getElementById("imgPauseChange").src = "http://royaltrax.com/aadev/images/left/images/left_05-pause.png";
         }
        else 
        {
            document.getElementById("aud").pause();
            document.getElementById("imgPauseChange").src = "http://royaltrax.com/aadev/images/left/images/left_05.png";
        }
    }
</script>

相关内容

  • 没有找到相关文章

最新更新