一个简单的网页播放器

2018-08-31 0条评论 1,414次阅读 0人点赞

项目由来：纯属想学一下前端

实现功能：能音乐播放，能切换，能自动播放，可选播放模式，带滚动歌词，最主要的是有逼格，兼容主流浏览器即可。

思路：利用bootstrap设计编写前端，php编写后端，歌曲播放用js或jq控制

最初的功能设想是这样的，但是还是不够高大上！思来想去决定加个视频比较好，怎么加呢？背景！高端大气又不破坏原本风格。

但是。。。 视频要求服务器带宽要足够，所以 七牛云注册认证上传生成外链一套操作搞定，每月10G个人网站够用了！

万事具备，上代码吧！

 

<script type="text/javascript">
 
        var now = 0;
        var music_list=[];
        var audio=document.getElementById("audio");
        var video=document.getElementById("video");
 
        //获取歌曲列表
        $(".music_list").each(function(index, el) {
            music_list.push($(this).html());
        });
        //播放按钮状态
        function show_status(s){
            if(s==1){//正在播放
                $(".action-play").hide();
                $(".action-pause").show();
            }else{//暂停
                $(".action-play").show();
                $(".action-pause").hide();
            }
        }
        //秒转分
        function sec2mion(sec){
            min=("0"+Math.floor(sec/60)).slice(-2);
            sec=("0"+Math.floor(sec%60)).slice(-2);
            return min+":"+sec;
        }
        //提示信息
        function msg(message){
            $("#msg").html(message);
        }
        //播放
        function play(music){
            msg("正在播放："+music+".mp3");
            $("title").html("正在播放："+music);
 
            //七牛云链接
            audio.src = "http://p8hrmswib.bkt.clouddn.com/music/"+music+".mp3";
            video.src = "http://p8hrmswib.bkt.clouddn.com/video/"+music+".mp4";
            //数据预加载完毕
            audio.oncanplaythrough=function (){
                //设置进度条长度
                $('#slider1').slider({
                    min: 0,
                    max: audio.duration,
                });
                //显示歌曲时长
                $(".duration").html(sec2mion(audio.duration.toFixed(0)));
                $(".action-pause").hide();
                $(".action-play").show();
                $(".music_list").removeClass('inplay');//重置正在播放标记
                $(".music_list:contains('"+music+"')").addClass('inplay');//重新标记正在播放
                $(".playcon").remove();
                $(".music_list:contains('"+music+"')").before('<i class="fa fa-play playcon"></i>');
                $("#lrc_role").css("margin-top",0);//滚动歌词置顶准备滚动
                show_lrc(music);//显示歌词
                audio.play();//音乐播放
                video.play();//视频播放
                sync();//同步播放
                show_status(1);//显示在正播放按钮
 
            }
        }
 
        function show_lrc(music){
            var ar;
            var ti;
            //异步获取歌词
            $.get(
                '/music/'+music+'.lrc',
                function(data) {
                    var time = [];
                    var lrc = [];
                    var height = [];
                    split = data.split("\r\n");//行分割
                    //提取歌词、时间放入数组
                    for (var i = 0; i < split.length; i++){
                        txt=split[i];
                        var lrc_regex=/^\[\d{2}:\d{2}\.\d{2}\]/;
                        if(lrc_regex.test(txt)){
                            lrc.push(txt.split("]")[1]);
                            time.push(parseFloat(txt.match(/\[(\S*):/)[1]*60)+parseFloat(txt.match(/:(\S*)\]/)[1]));
                        }
                    }
                    console.log(lrc);
                    try{
                        clearInterval(lrc1);
                    }catch(err){
                        console.log(err);
                    }
                    lrc_list='';
                    //显示歌词
                    for (var i = 0; i < lrc.length; i++) {
                        lrc_list=lrc_list+"<span id='l"+i+"' class='role-lrc-list' style='color:#fff'>"+lrc[i]+"</span><br />";
                    }
                    $("#lrc_role").html(lrc_list);
                    //获取歌词的位置
                    $(".role-lrc-list").each(function(index, el) {
                        height.push($(this).position().top);
                    });
                    //每0.2秒检测更新一次歌词
                    lrc1=setInterval(function(){
                        //进度条显示
                        currentTime=audio.currentTime;
                        $(".currentTime").html(sec2mion(audio.currentTime.toFixed(0)));
                        $('#slider1').slider({
                            value: currentTime,
                        });
                        //显示歌词
                        for (var ii = 0; ii < time.length; ii++) { if((currentTime >= time[ii] && currentTime < time[ii+1]) || currentTime > time[time.length-1]){
                                $(".lrc_show").html(lrc[ii]);
                                $(".role-lrc-list").removeClass('inrow');
                                $("#l"+ii+"").addClass('inrow');
                                $("#lrc_role").css("margin-top",-height[ii]+80);
                            }
                        }
                    },200);
                }
            );
        }
 
        function sync(){
            // console.log("开启同步");
            // try{
            //     clearInterval(sync);
            // }catch(err){
            //     console.log(err);
            // }
            // sync=setInterval(function(){
            //     vc=parseInt(video.currentTime);
            //     ac=parseInt(audio.currentTime);
            //     console.log(vc+"|"+ac)
            //     if(vc!=ac){
            //         video.currentTime=audio.currentTime;//同步时间
            //     }
            //     // console.log("同步于"+currentTime);
            // },200);
        }
        //判断播放模式
        $("#audio").bind('ended',function () {
            play_type=$(".play_type:checked").val();
            msg("本首歌曲播放完毕，开始播放下一首");
            setTimeout(function(){
                if(play_type==1){//列表循环
                    now=parseInt(now)+1;
                    if(now>=music_list.length){
                        now=0;
                    }
                    msg("列表循环");
                    play(music_list[now]);
                }else if(play_type==2) {//单曲循环
                    now=now
                    msg("单曲循环");
                    play(music_list[now]);
                }else if(play_type==3){//列表顺序
                    now=parseInt(now)+1;
                    if(now<music_list.length){ msg("顺序播放"); play(music_list[now]); }else{ msg("顺序播放完成"); } } },1000); }); //点击播放 $(".music_list").click(function(){ now=$(this).attr("data"); show_status(0); play($(this).html()); }); //调整播放时间 $('#slider1').slider({ slide: function(event, ui){ audio.currentTime=ui.value; video.currentTime=ui.value; } }); //播放 $(".action-play").click(function(){ show_status(1); audio.play(); video.play(); }); //暂停 $(".action-pause").click(function(){ show_status(0); audio.pause(); video.pause(); }); //下一首 $(".fa-forward").click(function(){ now=parseInt(now)+1; if(now>=music_list.length){
                now=0;
            }
            show_status(0);
            play(music_list[now]);
        });
        //上一首
        $(".fa-backward").click(function(){
            now=parseInt(now)-1;
            if(now<0){
                now=music_list.length-1;
            }
            show_status(0);
            play(music_list[now]);
        });
 
        $(document).ready(function(){
            // check_system();
            now=0;
            play(music_list[now]);
            $("#player").draggable();
            $("#role_lrc").draggable();
        });
 
        document.addEventListener('DOMContentLoaded', function () {
            objectFit.polyfill({
                selector: 'video',
                fittype: 'cover'
            });
        });
 
        function check_system(){
            var system ={
                win : false,
                mac : false,
                xll : false
            };
            //检测平台
            var p = navigator.platform;
            system.win = p.indexOf("Win") == 0;
            system.mac = p.indexOf("Mac") == 0;
            system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
            //跳转语句，如果是手机访问就自动跳转页面
            if(system.win||system.mac||system.xll){
                $(".phone_hidden").show();
                console.log(p);
            }else{
                $(".phone_hidden").hidden();
                alert("请使用电脑打开");
                // window.location.href="/index5.php";
            }
        }
 
        //平台、设备和操作系统
 
 
        jQuery(document).ready(function() {
            App.init();
            StyleSwitcher.initStyleSwitcher();
            PageComingSoon.initPageComingSoon();
        });

var now = 0;
var music_list=[];
var audio=document.getElementById("audio");
var video=document.getElementById("video");

//获取歌曲列表
$(".music_list").each(function(index, el) {
music_list.push($(this).html());
});
//播放按钮状态
function show_status(s){
if(s==1){//正在播放
$(".action-play").hide();
$(".action-pause").show();
}else{//暂停
$(".action-play").show();
$(".action-pause").hide();
}
}
//秒转分
function sec2mion(sec){
min=("0"+Math.floor(sec/60)).slice(-2);
sec=("0"+Math.floor(sec%60)).slice(-2);
return min+":"+sec;
}
//提示信息
function msg(message){
$("#msg").html(message);
}
//播放
function play(music){
msg("正在播放："+music+".mp3");
$("title").html("正在播放："+music);

//七牛云链接
audio.src = "http://p8hrmswib.bkt.clouddn.com/music/"+music+".mp3";
video.src = "http://p8hrmswib.bkt.clouddn.com/video/"+music+".mp4";
//数据预加载完毕
audio.oncanplaythrough=function (){
//设置进度条长度
$(‘#slider1’).slider({
min: 0,
max: audio.duration,
});
//显示歌曲时长
$(".duration").html(sec2mion(audio.duration.toFixed(0)));
$(".action-pause").hide();
$(".action-play").show();
$(".music_list").removeClass(‘inplay’);//重置正在播放标记
$(".music_list:contains(‘"+music+"’)").addClass(‘inplay’);//重新标记正在播放
$(".playcon").remove();
$(".music_list:contains(‘"+music+"’)").before(‘<i class="fa fa-play playcon"></i>’);
$("#lrc_role").css("margin-top",0);//滚动歌词置顶准备滚动
show_lrc(music);//显示歌词
audio.play();//音乐播放
video.play();//视频播放
sync();//同步播放
show_status(1);//显示在正播放按钮

}
}

function show_lrc(music){
var ar;
var ti;
//异步获取歌词
$.get(
‘/music/’+music+’.lrc’,
function(data) {
var time = [];
var lrc = [];
var height = [];
split = data.split("\r\n");//行分割
//提取歌词、时间放入数组
for (var i = 0; i < split.length; i++){
txt=split[i];
var lrc_regex=/^\[\d{2}:\d{2}\.\d{2}\]/;
if(lrc_regex.test(txt)){
lrc.push(txt.split("]")[1]);
time.push(parseFloat(txt.match(/\[(\S*):/)[1]*60)+parseFloat(txt.match(/:(\S*)\]/)[1]));
}
}
console.log(lrc);
try{
clearInterval(lrc1);
}catch(err){
console.log(err);
}
lrc_list=”;
//显示歌词
for (var i = 0; i < lrc.length; i++) {
lrc_list=lrc_list+"<span id=’l"+i+"’ class=’role-lrc-list’ style=’color:#fff’>"+lrc[i]+"</span><br />";
}
$("#lrc_role").html(lrc_list);
//获取歌词的位置
$(".role-lrc-list").each(function(index, el) {
height.push($(this).position().top);
});
//每0.2秒检测更新一次歌词
lrc1=setInterval(function(){
//进度条显示
currentTime=audio.currentTime;
$(".currentTime").html(sec2mion(audio.currentTime.toFixed(0)));
$(‘#slider1’).slider({
value: currentTime,
});
//显示歌词
for (var ii = 0; ii < time.length; ii++) { if((currentTime >= time[ii] && currentTime < time[ii+1]) || currentTime > time[time.length-1]){
$(".lrc_show").html(lrc[ii]);
$(".role-lrc-list").removeClass(‘inrow’);
$("#l"+ii+"").addClass(‘inrow’);
$("#lrc_role").css("margin-top",-height[ii]+80);
}
}
},200);
}
);
}

function sync(){
// console.log("开启同步");
// try{
// clearInterval(sync);
// }catch(err){
// console.log(err);
// }
// sync=setInterval(function(){
// vc=parseInt(video.currentTime);
// ac=parseInt(audio.currentTime);
// console.log(vc+"|"+ac)
// if(vc!=ac){
// video.currentTime=audio.currentTime;//同步时间
// }
// // console.log("同步于"+currentTime);
// },200);
}
//判断播放模式
$("#audio").bind(‘ended’,function () {
play_type=$(".play_type:checked").val();
msg("本首歌曲播放完毕，开始播放下一首");
setTimeout(function(){
if(play_type==1){//列表循环
now=parseInt(now)+1;
if(now>=music_list.length){
now=0;
}
msg("列表循环");
play(music_list[now]);
}else if(play_type==2) {//单曲循环
now=now
msg("单曲循环");
play(music_list[now]);
}else if(play_type==3){//列表顺序
now=parseInt(now)+1;
if(now<music_list.length){ msg("顺序播放"); play(music_list[now]); }else{ msg("顺序播放完成"); } } },1000); }); //点击播放 $(".music_list").click(function(){ now=$(this).attr("data"); show_status(0); play($(this).html()); }); //调整播放时间 $(‘#slider1’).slider({ slide: function(event, ui){ audio.currentTime=ui.value; video.currentTime=ui.value; } }); //播放 $(".action-play").click(function(){ show_status(1); audio.play(); video.play(); }); //暂停 $(".action-pause").click(function(){ show_status(0); audio.pause(); video.pause(); }); //下一首 $(".fa-forward").click(function(){ now=parseInt(now)+1; if(now>=music_list.length){
now=0;
}
show_status(0);
play(music_list[now]);
});
//上一首
$(".fa-backward").click(function(){
now=parseInt(now)-1;
if(now<0){
now=music_list.length-1;
}
show_status(0);
play(music_list[now]);
});

$(document).ready(function(){
// check_system();
now=0;
play(music_list[now]);
$("#player").draggable();
$("#role_lrc").draggable();
});

document.addEventListener(‘DOMContentLoaded’, function () {
objectFit.polyfill({
selector: ‘video’,
fittype: ‘cover’
});
});

function check_system(){
var system ={
win : false,
mac : false,
xll : false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//跳转语句，如果是手机访问就自动跳转页面
if(system.win||system.mac||system.xll){
$(".phone_hidden").show();
console.log(p);
}else{
$(".phone_hidden").hidden();
alert("请使用电脑打开");
// window.location.href="/index5.php";
}
}

//平台、设备和操作系统

jQuery(document).ready(function() {
App.init();
StyleSwitcher.initStyleSwitcher();
PageComingSoon.initPageComingSoon();
});

点击查看效果

《一个简单的网页播放器》

点赞
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表评论

邮箱地址不会被公开。 必填项已用*标注