拥有播放音乐效果的图标

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

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

<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();};

拥有播放音乐效果的图标相关推荐

解决微信页面加载自动播放音乐
项目中突然用到了这个功能,于是记录了下来 html: <audio style="display:none; height: 0" id="bg-music&quo ...
Android实现在线播放音乐
Android实现在线播放音乐 2014年3月10日 hello,小伙伴们,3月份珊珊来迟的第一篇博客,最近小巫在找工作,加上又生病了,就没有太多精力去写博客了.今天拖着病发表一篇之前已经实现的在线播 ...
html5手机不能自动播放音乐,H5案例---解决H5中背景音乐无法自动播放问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼四.完整代码您的浏览器不支持 audio标签. // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器 ...
react项目中播放音频时扬声器图标动画效果
今天在做react项目时,一个小的功能需求:点击播放音频时扬声器图标要实现动画效果. 起初我做出来的效果是第一次点击播放音频时,音频图标会有动画效果,但继续点击动画效果却没有了. 后面我的做法如下: ...
Android初级，实现网易云音乐歌曲列表界面效果，播放界面效果，ListView，ViewPager方法详解
初学Android初级,第一篇博客文章,如有错误,还望批评指正! 本文主要内容以网易云音乐歌曲列表界面效果代码,播放音乐界面效果代码为主,并将ListView和ViewPager作为实现界面滑动功能的 ...
安卓实现网易云音乐底部播放栏效果之使用UI绑定到Service上实现
先说原理:音乐播放需要使用到Service,而播放栏也是属于音乐播放的,那么为什么我们不把这两者合在一起呢? 把UI和音乐Service合在一起,用Service来控制UI界面不是更简单.在进入Act ...
基于android的网络音乐播放器-播放音乐及收藏音乐的效果展示（四）
作为android初学者,最近把疯狂android讲义和疯狂Java讲义看了一遍,看到书中介绍的知识点非常多,很难全部记住,为了更好的掌握基础知识点,我将开发一个网络音乐播放器-EasyMusic来巩 ...
android 存放音频文件夹里,Android 实现简单的音乐播放器效果（音频文件的三种存放）...
Android 实现简单的音乐播放器效果(音频文件的三种存放).三种方法主要使用到的类 MediaPlayer.create() getAssets() new Mediaplayer() - 几个控 ...
android播放mp3旋转动画,Android 实现旋转木马的音乐效果
一.百度在线音乐旋转木马效果就上面那个,当音乐在播放的时候,那个光碟轮子在转,就想旋转木马一般.感觉好好玩啊. 碰巧想起前阵子做音乐播放器,哎,那这个也可以做在手机的音乐播放器上,这样就代替了进度条 ...

拥有播放音乐效果的图标

拥有播放音乐效果的图标相关推荐

最新文章

热门文章