程序博客网 > asp客服源码

html<audio>标签实现的网页播放器

来源：互联网 发布：asp客服源码 编辑：程序博客网 时间：2024/05/30 02:52

利用html、css3、js、jquery混合写的简易网页播放器

//html部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易音乐播放器</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/index.js"></script>
</head>

<body>
    <!--头部开始-->
    <div class="title" id="title">
        <i>Jquery/HTML制作网页音乐播放器</i>
        <audio src="#" id="audiomusic" autoplay="autoplay" hidden="hidden" />
    </div>
    <!--头部结束-->
    <div class="music" id="music">
        <div class="musicBox"></div><!--透明度更改了的播放框-->
        <div class="musicBoxs">
            <div class="Topmusic">
            <!--歌手头像开始-->
                <div class="photo">
                    <img id="imagess" src="#" alt="网络开小差..." class="images" />
                </div>
                <!--歌手头像结束-->
                <div class="content">
                    <!--歌曲描述开始-->
                    <div class="musicname" id="musicname">
                        
                    </div>
                    <!--歌曲描述结束-->
                    <div class="play">
                        <div class="playN">
                        <!--上一首、暂停、下一首开始-->
                            <div class="playNM">
                                <div class="left" onClick="down()"></div>
                                <div class="centers" id="center" onClick="play()"></div>
                                <div class="right" onClick="up()"></div>
                            </div>
                            <!--结束-->
                            <!--声音部分开始-->
                            <div class="playNN">
                                <div class="shengyin" id="muted" onClick="muted()"></div>
                                <div class="lang" id="lang">
                                    <div class="jingdu" id="jingdu"></div>
                                    <i class="dian" id="dian"></i>
                                </div>
                            </div>
                            <!--声音部分结束-->
                        </div>
                        <!--歌曲播放进度开始-->
                        <div class="Timejindu" id="Timejindu">
                            <div class="jindutiao" id="jindutiao"></div>
                             <i class="dian1" id="dian1"></i>    
                        </div>
                        <!--歌曲播放进度结束-->
                        <!--歌曲播放时间开始-->
                        <div class="time" id="time">00:00</div>
                        <!--歌曲播放时间结束-->
                        <!--摆设图标，不用管-->
                        <div class="loop" id="loop"></div>
                        <div class="random" id="random"></div>
                        <!--摆设图标，不用管，结束-->
                    </div>
                </div>
            </div>
            <!--歌曲名字部分-->
            <div class="Buttommusic">
                <ul class="name" id="name">
                    
                </ul>
            </div>
            <!--歌曲名字部分结束-->
        </div>
    </div>
    <!--文字打印部分-->
    <div class="textContentBox">
        <div class="textContent" id="textContent">
            <i class="text" id="text">
                你们这些混蛋;新的一年就要到了;我在湖南祝你们新年快乐;身体健康，万事如意;
                考试了的;老师改卷科科90;还没有考的;考的全会，蒙的全对;新年快乐
            </i>
        </div>
    </div>
    <!--文字打印部分结束-->
    <!--版权部分-->
    <div class="floor">本播放器由麦宜楷制作 &copy;麦宜楷 联系方式:15574711460 </div>
    <!--版权部分结束-->
</body>
</html>


//css部分

/* CSS Document */
*{
    margin:0 auto;
    padding:0;
}
body{
    margin:0 auto;
    padding:0;
    position:relative;
    background:#3B3B3B;
}
li{
    list-style:none;
}
.title{
    width:100%;
    height:200px;
    position:relative;
    text-align:center;
    font-size:25px;
    background:url(images/newyear.jpg) no-repeat;
    background-size:100% 100%;
    color:#fff;
}
.title i{
    display:inline-block;
    margin-top:50px;
}
.music{
    width:100%;
    height:550px;
    position:relative;
    background:url(images/10.jpg) no-repeat;
    background-size:cover;
}
.floor{
    width:100%;
    height:20px;
    position:relative;
    text-align:center;
    line-height:30px;
    color:#fff;
}
.musicBox{
    width:600px;
    height:300px;
    background:#181818;
    position:absolute;
    top:70px;
    left:600px;
    z-index:5;
    opacity:0.5;
    border-radius:15px;
}
.musicBoxs{
    width:600px;
    height:300px;
    position:absolute;
    top:70px;
    left:600px;
    z-index:6;
}

.Topmusic{
    width:100%;
    height:170px;
    position:absolute;
    z-index:0;
}
.photo{
    width:150px;
    height:150px;
    position:absolute;
    border-radius:10px;
    box-shadow:0 2px 10px black;
    overflow:hidden;
    top:10px;
    left:10px;
}
.images{
    width:150px;
    height:150px;
    border-radius:10px;
}
.content{
    width:400px;
    height:150px;
    background:#141414;
    position:absolute;
    top:10px;
    right:10px;
    border-radius:10px;
    text-indent:20px;
}
.musicname strong,.musicname .guojia,.musicname .allname{
    display: block;
    text-overflow: ellipsis;
    line-height:25px;
}

.play{
    width:100%;
    height:75px;
    position:absolute;
}
.Buttommusic{
    width:80%;
    height:100px;
    position:absolute;
    background:#141414;
    bottom:10px;
    left:10%;
    font-size:14px;
    border-radius:10px;
}
.name{
    width:90%;
    height:80px;
    margin-top:10px;
    padding:0 5%;
}

.name li{
    padding-left:30px;
    color:#aaa;
    cursor:pointer;
    margin-bottom:10px;
    transition:all 0.3s ease 0s;
}
.playN{
    width:100%;
    height:25px;
    position:absolute;
    top:5px;
}
.playNM{
    width:120px;
    height:100%;;
    position:absolute;
    left:20px;
}
.playNM .left,.playNM .center,.playNM .right{
    width:25px;
    height:25px;
    margin-right:15px;
    opacity:0.6;
    float:left;
    border-radius:15px;
    cursor:pointer;
}
.playNM .centers{
    width:25px;
    height:25px;
    margin-right:15px;
    opacity:0.6;
    float:left;
    border-radius:15px;
    cursor:pointer;
}

.left{
    background:url(images/ec44ba9672.jpg) no-repeat -536px -77px;
}
.center{
    background:url(images/ec44ba9672.jpg) no-repeat -248px -19px;
}

.centers{
    background:url(images/ec44ba9672.jpg) no-repeat -152px -77px;
}
.right{
    background:url(images/ec44ba9672.jpg) no-repeat -56px -135px;
}
.playNM .left:hover{
    opacity:1;
}
.playNM .center:hover{
    opacity:1;
}
.playNM .centers:hover{
    opacity:1;
}
.playNM .right:hover{
    opacity:1;
}

.playNN{
    width:150px;
    height:25px;
    position:absolute;
    right:20px;
}
.shengyin{
    background:url(images/ec44ba9672.jpg) no-repeat -56px -310px;
    width:24px;
    height:24px;
    position:absolute;
    left:10px;
    top:1px;
    opacity:0.6;
    border-radius:15px;
    cursor:pointer;
}

.shengyins{
    background:url(images/ec44ba9672.jpg) no-repeat -536px -253px;
    width:24px;
    height:24px;
    position:absolute;
    left:10px;
    top:1px;
    opacity:0.6;
    border-radius:15px;
    cursor:pointer;
}
.shengyin:hover{
    opacity:1;
}
.lang{
    width:100px;
    height:5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    cursor: pointer;
    position: absolute;
    top:10px;
    right:5px;
    border-radius:5px;
    cursor: pointer;
}

.jingdu{
    width:0px;
    height: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    cursor: pointer;
    background:#00B75B;
    border-radius:5px;
    float:left;
    cursor: pointer;
}
.dian{
    width:5px;
    height:5px;
    display:block;
    border-radius:5px;
    border:1px solid #036;
    position:relative;
    margin-left:-5px;
    margin-top:-1px;
    float:left;
    cursor: pointer;
}
.Timejindu{
    width:98%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    cursor: pointer;
    height: 5px;
    position: absolute;
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    bottom:30px;
    border-radius:5px;
    left:1%;
}
.jindutiao{
    width:7px;
    height: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    cursor: pointer;
    background:#00B75B;
    border-radius:5px;
    float:left;
}
.dian1{
    width:5px;
    height:5px;
    display:block;
    border-radius:5px;
    border:1px solid #036;
    position:relative;
    margin-left:0px;
    margin-top:-1px;
    float:left;
}

.time{
    width:30px;
    height:20px;
    position:absolute;
    bottom:5px;
    left:5px;
}
.loop{
    width:25px;
    height:25px;
    position:absolute;
    background:url(images/ec44ba9672.jpg) no-repeat -55px  -253px;
    bottom:3px;
    right:80px;
    border-radius:15px;
    opcity:0.6;
}

.random{
    width:25px;
    height:25px;
    position:absolute;
    background:url(images/ec44ba9672.jpg) no-repeat -56px  -367px;
    bottom:3px;
    right:30px;
    border-radius:15px;
    opacity:0.6;
}
.loop:hover{
    opacity:1;
}
.random:hover{
    opacity:1;
}

.name li.playmusic{
    vertical-align:middle;
    color:#fff;
    font-weight:bold;
    
}

.textContentBox{
    width:560px;
    height:500px;
    position:absolute;
    top:200px;
    left:30px;
}

.textContent{
    width:540px;
    position:absolute;
    left:10px;
    top:15px;
    height:470px;
}

.text{
    font-size:14px;
    line-height:30px;
    color:red;
}


//js、jquery部分


// JavaScript Document
var str="";
var music;
var index=0;
var volume=0;
var allTime=0;
var marginLeft=0;
var content="";//记录标签里原有的文本
var upindex=0;//记录数组的
var contentindex=0;//记录当前的输出位
var uptext="";//记录上一次输出的
var backgroundphoto="";
var backgroundphotoindex=0;
var color="";//颜色变换
var colorindex=0;
var colors="";
var colorindexs=0;
$(function(){


//考虑到自己能力有限，歌曲的信息与路劲由自己添加

//背景部分也可以优化

//颜色代码需要自己去找

    music=[["新年快乐.mp3","中国娃娃","祝愿大家新年快乐","20.jpg"],["新年快乐s.mp3","小虎队、忧欢派对","新年快乐","21.jpg"],["快乐老家.mp3","陈明 ","欢乐老家","22.jpg"]];
    backgroundphoto=["6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg"];
    color=["#FF66FF","#CC33CC","#CC00FF","#FF33FF","#CC99FF","#9900CC","#FF00FF","#CC66FF","#990099","#CC0099","#CC33FF","#CC99CC","#990066","#993399","#CC66CC","#CC00CC","#663366"];
    
    colors=["Aqua","Fuchsia","Gray","Gree","Lime","Maroon","Navy","Olive","Purple","Red","Silver","Teal","White","Yellow","Blue"];
    //标题字体颜色
    function colorchange(){
        $("#title").css("color",color[colorindex]);
        colorindex++;
        if(colorindex==color.length){
            colorindex=0;
        }
    }
    setInterval(colorchange,"500");
    //打印文字
    function colorchanges(){
        $("#text").css("color",colors[colorindexs]);
        colorindexs++;
        if(colorindexs==colors.length){
            colorindexs=0;
        }
    }
    setInterval(colorchanges,"500");
    
    //背景循环
    function backgrounds(){
        $("#music").css("background-image","url(images/"+backgroundphoto[backgroundphotoindex]+")");
        backgroundphotoindex++;
        if(backgroundphotoindex==backgroundphoto.length){
            backgroundphotoindex=0;
        }
    }
    setInterval(backgrounds,'5000');
    
//音量    
    $("#audiomusic").attr("src","music/"+music[index][0]);
    document.getElementById("audiomusic").volume=0.5;
    volume=document.getElementById("audiomusic").volume;
    $("#jingdu").css("width",(volume*100)+"%");
    //下边的名字
    $.each(music,function(i){
        str+="<li>"+music[i][1]+"-"+music[i][0]+"</li>";
    });
    $("#name").html(str);
    //上边的名字
    str="";
    $.each(music,function(i){
        if($("#audiomusic").attr("src").substr($("#audiomusic").attr("src").indexOf("/")+1)==music[i][0]){
            index=i;
            title(index);
        }        
    });

    //设定时间
    function getTime(){
        
        allTime=Math.round(document.getElementById("audiomusic").duration);
        var time=parseInt(document.getElementById("audiomusic").currentTime)+1;
        if(time<10){
            $("#time").html("00:0"+time);
        }else if(time>9){
            if(time%60<10){
                $("#time").html("0"+parseInt(time/60)+":0"+time%60);
            }else{
                $("#time").html("0"+parseInt(time/60)+":"+time%60);
            }
        }
        if(time%allTime!=0){
            $("#jindutiao").css("width",Math.round((time/allTime)*100)+"%");
        }
        if(time==allTime){
            if(index<music.length-1){
                index=index+1;
            }else if(index==music.length){
                index==0;
            }
            title(index);
            
        }
        if($("#jindutiao").width()>$("#Timejindu").width()-8){
            if(parseInt($("#dian1").css("margin-left"))>-7){
                margnLeft=parseInt($("#dian1").css("margin-left"))-1;
                $("#dian1").css("margin-left",margnLeft+"px");
            }
        }else {
            margnLeft=-4;
            $("#dian1").css("margin-left",margnLeft+"px");
        }
            
    }
    
    setInterval(getTime,'100');
    
    
    //点击事件--音量
    $("#lang").mousedown(function(event){
        //$("#lang").offset().left
        //alert((event.pageX-$("#lang").offset().left)/$("#lang").width());
        document.getElementById("audiomusic").volume=(event.pageX-$("#lang").offset().left)/$("#lang").width();
        volume=document.getElementById("audiomusic").volume;
        $("#jingdu").css("width",(volume*100)+"%");
        if($("#jingdu").width()<10){
            $("#dian").css("margin-left",0+"px");
        }else if($("#jingdu").width()>($("#jingdu").width()-10)){
            $("#dian").css("margin-left",-7+"px");
        }
        
    });
    
    $("#Timejindu").mousedown(function(event){
        document.getElementById("audiomusic").currentTime=(((event.pageX-$("#Timejindu").offset().left)/$("#Timejindu").width())*allTime);
        
    });
    
    //文本输出
    content=document.getElementById("text").innerHTML.split(";");
    document.getElementById("text").innerHTML="";
    contents();
    
    function contents(){
        if(upindex<content.length){
            if(contentindex<content[upindex].length){
                var str=content[upindex];
                
                $("#text").html(uptext+content[upindex].substr(contentindex,1)+"_");
                uptext=$("#text").html().substr(0,$("#text").html().length-1);
                contentindex++;
                if(contentindex==content[upindex].length){
                    $("#text").html(uptext+"<br />");
                    uptext=$("#text").html();
                    upindex++;
                    contentindex=0;
                }
                setTimeout(contents,500);
            }
        }else{
            return;
        }
    }
})
//上一首
function up(){
    var src=$("#audiomusic").attr("src").substr($("#audiomusic").attr("src").indexOf("/")+1);
    $("#name li:eq("+index+")").removeAttr("class");
    if(index<music.length-1){
        $.each(music,function(i){
            if(src==music[i][0]){
                index=i;
            }
        });
        index=index+1;
    }else if(index==music.length-1){
        index=0;
    }
    title(index);
}
//暂停播放
function play(){
    var audiomusic=document.getElementById("audiomusic");
    if(audiomusic.paused){
        audiomusic.play();
        $("#center").attr("class","centers");
    }else {
        audiomusic.pause();//只能允许js
        $("#center").attr("class","center");    
    }
}
//x下一首
function down(){
    var src=$("#audiomusic").attr("src").substr($("#audiomusic").attr("src").indexOf("/")+1);
    $("#name li:eq("+index+")").removeAttr("class");
    if(index>0){
        $.each(music,function(i){
            if(src==music[i][0]){
                index=i;
            }
        });
        index=index-1;
    }else if(index==0){
        index=music.length-1;
    }
    title(index);
}
//声音
function muted(){
    
    var audiomusic=document.getElementById("audiomusic");
    //alert(audiomusic.muted);
    if(audiomusic.muted){
        audiomusic.muted = false;
        $("#muted").attr("class","shengyin");
    }else{
        audiomusic.muted = true;
        $("#muted").attr("class","shengyins");
    }
}
//设置文字。。。名称等,
function title(index){
    var strc="<strong>"+music[index][0]+"</strong><span class='guojia'>"+music[index][1]+"</span><span class='allname'>"+music[index][2]+"</span>";
    $("#musicname").html(strc);
    $("#audiomusic").attr("src","music/"+music[index][0]);
    $("#imagess").attr("src","images/"+music[index][3]);
    
    $("#name li").removeAttr("class");
    $("#name li:eq("+index+")").attr("class","playmusic");
}

许多的个性化效果，需要自己去添加。。。

因为利用课余时间在做，所以有些地方没有得到完善，希望热心的各位提出一些意见

0 0
asp客服源码 asp客服源码
原创粉丝点击
热门IT博客
购买ET软件购买ET软件
考研英语网络间谍考研英语网络间谍
阿里云 快照和镜像区别
长虹电视设置网络电视
服务器端口开启
安庆历史气象数据查询
淘宝美工是什么岗位
sql查询分析器要联网吗
notepad 转json
rete算法详解
勇往直前网络歌手歌词
linux下gtk安装
海关数据公开
照片会说话软件
绝地求生 mac
牧高笛冷山3plus 知乎
js 如何判断是数组
好多网络歌手不红
计算器的java代码
优盘数据恢复价格
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 完美有多美结局啥意思 要女朋友有啥用处 女人更年期有啥症状 成都有啥好玩 女性喝胎菊有啥好处 男朋友有啥用 女朋友有啥用 要男朋友有啥用处 女性甲状腺有啥症状 拼音和音节有啥区别 女人吃酸枣有啥好处 有啥手机兼职 手机上边有个hd啥意思 被网警盯上有啥提示 师傅和师父有啥区别 黑枸杞功效 发现了什么 全球购骑士卡有啥用 香茅草对女性有啥危害 女性长期喝苦荞会有啥坏处 自营店和旗舰店有啥区别 喝益母草对女人身体有啥好处 比心陪玩线下199和99有啥区别 我家有囍 我家有 宠妻有喜 家有喜妇全集免费观看 凡人有喜 老房有喜 福晋有喜 清穿之贵妃有喜 家有喜妇剧情介绍 空间之宫婢有喜 农门有喜无良夫君俏熄妇 家有喜妇42集免费版 我家有喜全集 太子殿下有喜 皇夫有喜 侧妃有喜 老爷有喜 有喜化妆品

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里