JS控制音乐AUDIO播放与暂停


js直接获取对象方法

<audio id="audio" src="no.mp3"></audio>  
<script type="text/javascript">     
var audioEle = document.getElementById("audio");     
audioEle.play();	//播放     
audioEle.pause();	//暂停   
</script>

jquery获取对象法

<audio id="audio" src="no.mp3"></audio>  
<script type="text/javascript">     
var audioEle = $("#audio")[0];     
audioEle.play();	//播放    
audioEle.pause(); //暂停   
</script>

jquery为什么需要一个0呢?js操作获得的是audio对象,jquery选择器获得的是jquery对象,0对象的才是对应的节点对象。所以不能直接使用jquery对象去操作,这一点需要详细补充一下基础知识。

示例操作: HTML:

<p class="musicbtn">点击关闭音乐</p>
<audio id="mp3bf" autoplay loop src="music.mp3" type="audio/mpeg"></audio>

JS:

var myVid = $("#mp3bf")[0];    
$('p.musicbtn').click(function(){ 
 //防止冒泡  //event.stopPropagation();       
if(myVid.paused) //如果当前是暂停状态 
   {         
 $('.musicbtn').text("点击关闭音乐");
  myVid.play();//播放            
  return;      
   }else{    
 //当前是播放状态  $('.musicbtn').text("点击播放音乐");
   myVid.pause(); //暂停 
  }
 });

 

模板里使用php判断手机还是pc分别写代码

phpok有个很好的功能是可以为pc或者mobile制作不同的模板,程序会自动判断调用,这样在不同的终端会呈现2套完全不同的布局。 这种情况对于做PC和手机端布…

日期:2022-05-28

文字颜色渐变实现方式

给任意文字渐变颜 主要实现原理是在文字元素外包裹一个div,给这个包裹元素渐变背景并设置backgroud-clip:text,HTML代码结构如下: <…

日期:2022-05-27

根据浏览器JS判断多语言跳转

根据浏览器判断多语言跳转 <script type="text/javascript"> var url; var lang =…

日期:2022-05-22

Couchcms的中文文档全功能整合的演示站

Couchcms的中文文档这样每一条写感觉给小白倒是还好,比较细致,但是回头自己看的话效率太低了。 还是得做一个全功能的演示站,直接点击某一块的功能弹出对应的代…

日期:2022-05-11

Mamp for mac 新安装无法连接mysql解决方式和修改密码方法

说明 下载MAMP的时候默认的mysql的端口是8889,账户和密码都是root 修改MAMP 修改的话,打开MAMP PRO,选择mysql,当然首先需要关闭…

日期:2022-04-22

使用滚动条控制H5视频进入视窗播放,离开暂停

网页需求:一个项目网站里有多条h5视频,且隐藏了播放键需要自动播放(仿gif的形式),要求只有进入视口的视频播放,离开的视频暂停,可以减少资源占用。 解决方案:…

日期:2022-04-22

网站一键变灰色代码

网站一键变灰只需要加一句css代码,代码如下: html { -webkit-filter: grayscale(100%); -moz-filter: gra…

日期:2022-04-22