播放音频:

播放音频:

var audioDom = document.querySelector('audio');

document.querySelector('input').onclick = function() {

     console.log(audioDom.paused);                                  //true

     audioDom.play();

     console.log(audioDome.paused);     //false

}

audioDom.paused返回的结果是布尔值

因此,点击按钮来停止或开始音频的代码如下:

var audioDom = document.querySelector('audio');

document.querySelector('input').onclick = function() {

      if(audioDom.paused == true) {

              audioDom.play();

              $(this).css('background-image','url(image/pause.png)');      //播放状态下显示播放的图片

       } else {

               audioDom.paused();

               $(this).css('background-image','url(image/play.png)');      //暂停状态下显示暂停的图片

       }

}
给按钮设置背景图片,是在按钮里面加个图像的样子,不太好看,就需要把按钮的边框去掉,只需设置border:none;outline:none;即可

play()和paused()方法都是Dom的语法
插件执行的某个时机,干某件事,优先去找回调函数
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值