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

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

以上就是全部内容了。