08.18今天来完善音乐播放器的音量调整、单曲循环和全部循环功能。
本篇基于上一篇【小河今学 | JavaScript + JQuery】音乐播放器3-歌词轮播和进度条跳转功能实现

一、音量调整

首先最基本的，点击音量键和静音键的图标切换。

         // 点击静音$('.vol em').click(function() {if($(this).hasClass('mute')){   // 如果当前是静音$(this).removeClass('mute')player.muted = false;}else{  // 如果当前不是静音$(this).addClass('mute');player.muted = true;$('.vol a').css('display','none')}})

接着是调整音量的功能，当鼠标移到音量图标上方时，出现音量调节模块

         // 鼠标移到图标上方出现音量调节$('.vol em').mouseover(function(){$('.vol a').css('display','block');})

当我们点击时，我们首先要获得鼠标点击在页面的位置，从而与音量键的长度进行对比，调整音量长度和当前音量，与调整进度条方法类型

         // 音量调节点击$('.vol span').click(function(){// // 获取当前鼠标点击的位置// console.log(getMousePosition().top)// // console.log(1)// // 获取span标签的最上方位置// console.log($(this).offset().top)// // 获取当前点击的长度var long = (getMousePosition().top) - ($(this).offset().top)// 求点击长度占比var meter = long / $(this).height();var finalLong = 1 - meter;// 将进度条调整为点击的长度$('.vol i').height(finalLong * $(this).height());// 将audio音量调整为对应的音量player.volume = finalLong;// console.log(finalLong)// 改变数字$('.vol b').html(parseInt(finalLong * 100) + '%')// 点击后音量调整键隐藏$('.vol a').css('display','none')})

二、单曲循环

单曲循环只需要用到audio自带的属性loop就行了。

         // 点击单曲循环，改变图标$('.s-loop').click(function() {if($(this).hasClass('son')){   // 如果当前是单曲循环$(this).removeClass('son')player.loop = false;}else{  // 如果当前不是单曲循环$(this).addClass('son');$('.a-loop').removeClass('aon');player.loop = true;}})

三、全部循环

这里是基础的换图标，注意当点开全部循环时，单曲循环要取消。

         // 全部循环$('.a-loop').click(function() {if($(this).hasClass('aon')){   // 如果当前是全部循环$(this).removeClass('aon')}else{  // 如果当前不是全部循环$(this).addClass('aon');$('.s-loop').removeClass('son');player.loop = false;}})

当这一首歌结束后，播放下一首歌，所以我们要将方法写在player.addEventListener('ended',function () {}里

         // 当一首歌播放完毕后，改变图标，同时清理计时器player.addEventListener('ended',function () {$('.pp').removeClass('pause');$('.pp').addClass('play');clearInterval(timer);clearInterval(songTime);// 判断当前是否是全部循环if($('.a-loop').hasClass('aon')){// 播放下一首// 获取当前播放的歌下标加一var newIndex =  $('.click').index() + 1;// 如果获取的是最后一首歌的下标4，加1为5，作条件判断语句newIndex = newIndex > 4 ? 0 : newIndex;// console.log(newIndex)// 将click赋给获得的新下标的li标签$('.content li').eq(newIndex).addClass('click').siblings().removeClass('click');// 调用play方法play(newIndex)// console.log(1)}})

以上就是全部内容了。

【小河今学 | JavaScript + JQuery】音乐播放器4-音量调整、单曲循环、全部循环相关推荐

10款Flash和Javascript网页音乐播放器
关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...
JavaScript(JS) 音乐播放器
代码块中有注释可以阅读一下图片和音乐路径不同所以需要自己找一个合适的播放模式支持:列表播放(默认).循环播放.随机播放能控制音量大小.上一曲.下一曲.暂停.播放.播放节奏状态.查看播放列表.删 ...
Android应用--简、美音乐播放器增加音量控制
Android应用--简.美音乐播放器增加音量控制 2013年6月26日简.美音乐播放器继续完善中.. 题外话:上一篇博客是在6月11号发的,那篇博客似乎有点问题,可能是因为代码结构有点乱的原因,很难 ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
HTML5 javascript实现音乐播放器
准备毕业了,感觉好多东西都没学会,太多太多想学的知识,有种求知若渴的状态. 四年的大学就剩下一个多月了,无论将来多么困难,这条路是自己选的,走就要走的精彩! 自学了一点javascript.php,做 ...
使用JavaScript创建音乐播放器的案例详解
英文 | https://www.geeksforgeeks.org/create-a-music-player-using-javascript/?ref=leftbar-rightbar 翻译 | ...
JavaScript制作音乐播放器
对于制作网页来说,我们不但要把网页效果制作的美观能对浏览着有吸引眼球的效果,而且系在的网站还加如了背景音乐的效果,或者是播放列表的效果,就像各种空间.163邮箱里的音乐播放器一样,它不但能让用户在使用 ...
JavaScript 实现音乐播放器
效果 HTML代码  <div id="player"><div id="player ...
jquery音乐播放器（歌词滚动版）
好久没出来水了!!!忙忙碌碌的找工作~然后中秋节也算过了,祝各位coding们,直接觉醒第七感小宇宙,直接用心就能找到bug-_-// 最后如题这是一篇很正规的coding的文章大概么比以前的加了个 ...

【小河今学 | JavaScript + JQuery】音乐播放器4-音量调整、单曲循环、全部循环

一、音量调整

二、单曲循环

三、全部循环

【小河今学 | JavaScript + JQuery】音乐播放器4-音量调整、单曲循环、全部循环相关推荐

最新文章

热门文章