拥有播放音乐效果的图标

相信大家在做网页的时候，都想做一个有音乐播放的效果，那么我给大家分享一个可以播放音乐的小图标，同时的在鼠标移入可以隐藏，大程度的不占用空间，两个图标具有互相绑定的效果，无论点击哪个都会触发另一个的点击事件，大家可以看一下下面的截图
拥有播放音乐效果的图标

下面我给大家叙述一下是怎么做出来的，请看下面截图

<audio src="../../../wl/艾辰 - 东西.mp3" loop id="song"></audio>
<video src="../../../wl/艾辰 - 东西.mp3"></video>

先引入你要的歌曲，但是我们一般用audio引入，如果用video来引入，那么将是以下的效果，大家可以看到，用video引入它就有宽度和高度，对页面的整体感觉就会有不美观的效果，同时占用页面，但是用audio就完全没有这样的效果。所以我们一般使用audio来进行引入，再给它一个id。

拥有播放音乐效果的图标
然后我们来看一下js代码

var ind=false;
 var togel=document.getElementById("togel");
 var togel1=document.getElementById("togel1");
 var togel2=document.getElementById("togel2");
 var song=document.getElementById("song");
 var openbtn=document.getElementById("openbtn");
 var btstop=document.getElementById("btstop");
 var btopen=document.getElementById("btopen");
 var btnext=document.getElementById("btnext");
 togel.onmouseover=function(){
  openbtn.style.display="block";
 };
 togel.onmouseout=function(){
  openbtn.style.display="none";
 };
    openbtn.onmouseover=function(){
  openbtn.style.display="block";
 };
 openbtn.onmouseout=function(){
  openbtn.style.display="none";
 };

获取id之后，给图标的鼠标移入事件，当鼠标移动到图标上不隐藏。然后就是点击事件

togel.onclick=function(){
 if(ind==false){
  ind=true;
  togel1.style.display="block";
  btopen.style.display="block";
  btstop.style.display="none";
  togel2.style.display="none";
  song.play();
 }
 else{
  ind=false;
  btopen.style.display="none";
     btstop.style.display="block";
  togel1.style.display="none"; togel2.style.display="block";
  song.pause();
 }
};

先声明一个变量为布尔值，在点击事件里面给它一个判断，判断代码是否正在运行，如果没有在运行就让它运行，之后就是图标的显示和隐藏，如果ind为true正在运行,那么音乐进行播放，如果为false音乐暂停。

最后在暂停和播放的按钮给它一个点击事件，同时的图标也进行隐藏和显示，歌曲也能做到暂停和播放。看上去像是两个相互进行了绑定，但是只是隐藏了，有什么错误的地方，欢迎指正。

btopen.onclick=function(){
  btstop.style.display="block";
  btopen.style.display="none";  
  togel1.style.display="none";
  togel2.style.display="block";
  song.pause();
 };
 btstop.onclick=function(){
  btopen.style.display="block";
  btstop.style.display="none";
  togel1.style.display="block"; togel2.style.display="none"; 
  song.play();
 };

拥有播放音乐效果的图标

相关推荐