制作網頁迷你播放器

備注

字型圖示請自行到icomoon官網挑選下載下傳

播放隊列是将音樂連結存至information數組中

information[[歌名，歌手，專輯，連結位址],]

HTML

<html lang="ZN-CH">
<head>
    <meta charset="UTF-8">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Player</title>
    <meta name="viewport" content="width=1920px,height=1080px,initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <style>
		/*聲明字型*/
		@font-face
		{
		font-family: 'icomoon';
		src:  url('fonts/icomoon.eot?ie99k8');
		src:  url('fonts/icomoon.eot?ie99k8#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?ie99k8') format('truetype'),
		url('fonts/icomoon.woff?ie99k8') format('woff'),
		url('fonts/icomoon.svg?ie99k8#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
		font-display: block;
		}
	</style>
</head>
<body>
<div class="outlinebox" id="AllPlayer">
        <audio id="player"></audio>   
        <div class="picturebox"></div>
        <div class="lyricbox">
            <span id="back"></span>
            <span id="play"></span>
            <span id="next"></span>
        </div>
        <div class="voice">
            <span></span>
        </div>
        <div class="content"><span></span></div> 
        <p class="defaultLine" id="line">
            <span class="blueLine"></span>
            <!-- <span class="bar"></span> -->
        </p>    
        <div class="musicname">
            <p></p>
        </div>
    </div>
    <script src="scripts/PlayerStream.js"></script>
</body>

PlayerStream.js

var Myplayer=document.getElementById("player");
var count;
var flag=0;
var showmusicboxflag=0;
var loadimageflag=1;
$(".lyricbox").hover(
    function()
    {
        $(".lyricbox p").css('display','none');
        if(showmusicboxflag==0)
        {
            $(".musicname").css('display','block');
        }
    }
);
$(".lyricbox").mouseleave(
    function()
    {
        $(".lyricbox p").css('display','inline-block');
        $(".musicname").css('display','none');
    }
);
$('#play').click(function(){
    var player=document.getElementById('player');
    if(player.paused)
    {
        player.play(); 
    }
    else
    {
        player.pause();
    }
});
$('#back').click(function(){
    if(count==0)count=information.length-1;
    else count=count-1;
    playmusic(count);
});
$('#next').click(function(){
    if(count==information.length-1)count=0;
    else count=count+1;
    playmusic(count);
});
 $('.content').click(function(){
                if(showmusicboxflag==0)
               {
                var musiccontent=document.createElement('div');
                musiccontent.style.width="250px";
                if(information.length>10)
                musiccontent.style.height="250px";
                musiccontent.style.backgroundColor="white";
                musiccontent.style.position="absolute";
                musiccontent.style.top="50px";
                musiccontent.style.margin="0px 25px 0px 25px";
                musiccontent.style.overflowX="hidden";
                musiccontent.id="musicinfo";
                $('.outlinebox').append(musiccontent);
                loadmusic($('#musicinfo'));
                showmusicboxflag=1;
               } 
               else
               {
                $('#musicinfo').remove();
                showmusicboxflag=0;
               }
            });
Myplayer.addEventListener('ended', function () {  
    count=count+1;
    if(count==information.length)count=0;
    playmusic(count);
}, false);
var odiv = document.getElementById("AllPlayer");
odiv.onmousedown = function (ev) {
    var event = window.event || ev;
    var dx = event.clientX - odiv.offsetLeft; 
    var dy = event.clientY - odiv.offsetTop;
document.onmousemove = function (ev)
{
   var event = window.event || ev;
   odiv.style.left = event.clientX - dx + 'px';
   odiv.style.top = event.clientY - dy + 'px';
}
document.onmouseup = function () 
{
   document.onmousemove = null;
   document.onmouseup = null;
}
}
$('.voice').click(function(){
    $('#line').css('display','flex');
    var time=window.setTimeout(resetVolume,5000);          
});   
$('.voice span').hover(function(){
    $(this).css('color','#28AbFF');        
});  
$('.voice span').mouseleave(function(){
    $(this).css('color','grey');        
}); 
$('.content span').hover(function(){
    $(this).css('color','#28AbFF');        
});  
$('.content span').mouseleave(function(){
    $(this).css('color','grey');        
});  
Myplayer.volume=0.2;
document.getElementById("line").addEventListener("click",function(e)
            {
                if(e.offsetX<100)
                {
                    $(".blueLine").css('width',e.offsetX+'px');
                    Myplayer.volume=e.offsetX/80;
                }
            });
            $('#line').hover(function(){$(this).css('display','flex')});
// $('#line').mouseleave(function(){$(this).css('display','none')})
function resetVolume()
       {
       $('#line').css('display','none');
       }
function parseLyric(text)
{
        var lines=text.split('\n'),pattern = /\[\d{2}:\d{2}.\d{2}\]/g,result = [];    
            while (!pattern.test(lines[0])) 
            {    
            lineslines = lines.slice(1);    
            }; 
            lines[lines.length - 1].length === 0 && lines.pop(); 
            lines.forEach(function(v, i, a) 
            {    
            var time = v.match(pattern),       
            vvalue = v.replace(pattern, '');    
            time.forEach(function(v1, i1, a1) {      
            var t = v1.slice(1, -1).split(':');    
            result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), vvalue]);    
            });    
        });    
        result.sort(function(a, b) 
        {    
        return a[0] - b[0];    
        });    
        return result;    
        }  
function lyricaction(name)
{    
        flag=0;
        $.get('lyrics/'+name+'.lrc',function(data)
        {    
        var str=parseLyric(data);      
        $('#player')[0].ontimeupdate=function()
        {  
        if(this.paused)
        {
         $('#play').html('');  
        }
        else
        {
         $('#play').html('');
        }
        if (this.currentTime> str[flag][0])
        {
            $('#showlyricbox').css('margin-top','0px');
            $('#showlyricbox').text(str[flag][1]);
            $('#showlyricbox').animate({'margin-top':"-=60px"});
            flag++;
        }   
        if(flag==str.length-1){$('#player')[0].ontimeupdate=null;return;}
        };    
        }).fail(function()
        {
            $('#player')[0].ontimeupdate=function()
            {
                if(this.paused)
                {
                 $('#play').html('');  
                }
                else
                {
                 $('#play').html('');
                }
            };
            $('#showlyricbox').text("未找到歌詞");   
        });    
        }
function loadmusic(box)
        {
            for(var i=0,length=information.length;i<length;i++)
            {
                    //[歌名][歌手][專輯][位址]
                    var info=document.createElement('div');
                    info.style.width="250px";
                    info.style.height="25px";
                    info.style.cursor="pointer";
                    if(i%2==0) info.style.backgroundColor="rgba(200,200,200,0.6)";
                    else       info.style.backgroundColor="rgba(235,235,235,0.6)";
                    info.style.margin="0px 0px 0px 0px";
                    info.style.color="black";
                    var musictext=document.createElement('span');
                    musictext.style.position="absolute";
                    musictext.style.height="20px";
                    musictext.style.margin="2.5px 0px 2.5px 25px";
                    musictext.style.fontSize="13px";
                    //musictext.style.backgroundColor=info.style.backgroundColor;
                    musictext.innerText=information[i][0];
                    info.append(musictext);
                    // 添加Click事件
                    var element=$(info);
                    element.click(function(){
                        for(var i=0,length=information.length;i<length;i++)
                        {
                            if(this.innerText==information[i][0])
                            {                        
                                playmusic(i);
                            }
                        }
                    });
                    box.append(info);
            }            
        }
function playmusic(i)
{
    $("#player").attr('src',information[i][3]);
    $.get('pictures/'+information[i][2]+'.png',function(){}).fail(function(){ loadimageflag=0;console.log("error");$(".picturebox").css('background-color','white')});
    if(loadimageflag==1){$(".picturebox").css('background-image','url(\'pictures/'+information[i][2]+'.png\')');}
    $("#player")[0].play();
    count=i;
    lyricaction(information[i][0]);
    $(".musicname p").text(information[i][0]);
}
function getinformationbymusicname(name)
{
    var info=new Array();
    info=name.split(' - ');
    var singer=info[0];
    info=info[1].split('.');
    info[1]=singer;
    info[2]=singer;
    info[3]="Data/"+name;
    return info;
}

CSS

/* 音樂播放器定位樣式 */
.musicplayer
{
    height: 42px;
    width: 750px;
    margin-top: 10px;
    margin-left: 750px;
	margin-bottom:10px;
    position: absolute;
}
.playerstyle
{
	height:42px;
	width:400px;
    border-radius: 20px;
	margin-left:50px;			
	position: absolute;
}
.playerstyle audio
{	
	height:40px;
	width:400px;
	border-radius: 20px;
}
#playerlogo
{
	position: absolute;
	font-family: 'icomoon';
	font-size:25px;
	margin-top:8.6px;
	margin-bottom:8.6px;
    margin-left:6px;
	margin-right:6px;		
}
.outlinebox
{
    position: absolute;
    background-color: white;
    height:50px;
    width:300px;
    left: 946px;
    top: 5px;
    border-radius: 25px;
}
/* 此處設定圖檔盒子樣式與定位 */
.picturebox
{
    height: 45px;
    width: 45px;
    position: absolute;
    border-radius: 22.5px;
    margin:2.5px 0px 2.5px 3px;
    overflow: hidden;
}
/* 此處設定歌詞盒子的樣式與定位 */
.lyricbox
{
    background-color: white;
    height: 20px;
    width: 160px;
    position: absolute;
    margin: 15px 5px 15px 55px;   
    text-align: center;
    line-height: 20px;
}
#showlyricdiv
{
    background-color: transparent;
	position:fixed;
	width:100%;
    top:85%;
    z-index: -1;
}
#showlyricbox
{
    font-size: 50px;
    background-color: transparent;
    white-space: nowrap;
	color:rgb(68, 231, 142);
    text-align:center;
}
.lyricbox span
{
    background-color: white;
    font-family: 'icomoon';
    font-size: 25px;
    margin-left:20px;
    color:rgb(255, 100, 73);
}
.lyricbox span:hover{
    color:rgb(206, 34, 4);
    cursor: pointer;
}
/* 此處設定聲音按鈕樣式和定位 */
.voice
{
    background-color: white;
    height:20px;
    width:20px;
    position: absolute;
    margin:15px 15px 5px 240px;
}
.voice span
{
    font-family: 'icomoon';
    background-color: white;
    font-size: 20px;
    color:gray;
	line-height:20px;
}
.voice:hover
{
    cursor: pointer;
}
.defaultLine
{
    height: 2.5px;
    width: 80px;
    border-radius: 5px;
    background-color: #DADCDD;
    margin: 40px 0px 10px 210px;
    position:absolute;
    display: none;
}
.blueLine
{
    height: 2.5px;
    width:20px;
    background-color: #28AbFF;
    border-radius: 10px;
}
/* 此處設定歌單清單按鈕樣式和定位 */
.content
{
    background-color: white;
    height:20px;
    width:20px;
    position: absolute;
    margin:15px 15px 0px 270px;
}
.content span
{
    background-color: white;
    font-family: 'icomoon';
    color:gray;
	line-height:20px;
}
.content:hover
{
    cursor: pointer;
}
.musicname
{
    width: 250px;
    margin:50px 15px 0px 25px;
    display: none;
    position:absolute;
}
.musicname p
{
    background-color: rgba(255,255,255,0.7);
    text-align: center;
    font-size: 13px;
    height:25px;
    line-height: 25px; 
}

制作網頁迷你播放器

備注

繼續閱讀

DOM下元素 offset client scroll 相關屬性簡介

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條