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

标签 javascript html variables audio

我正在一个简单的项目中,在侧边栏中包含一个媒体(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>
    

    关于javascript - 使用JS变量(ubernewb)进行音频暂停/播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26190082/

    相关文章:

    javascript - 将 JAVASCRIPT 转换为 JQUERY 以缩短代码

    javascript - 在 Javascript 中替换变量的值

    php - 我可以在哪里放置 SELECT @rank :=0 in this query

    html - CSS :after is being pushed down by following elements

    php - "insert into $schoolname (' cat ',' ...) $_POST "if statement "没有将值传递到 $schoolname 表中

    javascript - 尝试删除 HTMLElement 的原型(prototype)失败

    javascript - 如何构建 Meteor 应用程序并加载到 Meteor shell 中

    javascript - 尝试在 Heroku 上托管 VueJS 应用程序。在heroku日志中获取 "npm ERR! missing script: start",在我的页面上获取 "Application error"

    javascript - html 输入文件上传返回 null

    html - 限制一页上特定 div 类的数量(wordpress)