html+js+css+mysql实现音乐播放器

web前端 专栏收录该内容
2 篇文章 0 订阅

实现原理

使用html写出界面,css装饰,js实现音乐播放和控制,音乐从data.js中读取相对路径,在js中使用player播放存在项目中的音乐。

主界面(index)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/reset.css">
        <link href="css/index.css" rel="stylesheet">
    </head>
    <body>
        <!-- 顶部logo和搜索 -->
        <div class="top">
            <div class="container">
                <div class="logo">
                    <h1>
                        <a href=""></a>
                    </h1>
                </div>
                <div class="search">
                    <i class="icono-search"></i>
                    <input type="text" placeholder="输入查询关键字">
                </div>
            </div>
        </div>
        
        <div class="play-main">
            <div class="container main-wrap">
                <!-- 左侧功能栏 -->
                <div class="left-side">
                    <ul class="side-menu">
                        <li><a href="" class="active"><i class="icon-font icon-recommend"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今日推荐</a></li>
                        <li><a href=""><i class="icon-font icon-rank"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排行榜</a></li>
                        <li><a href=""><i class="icon-font icon-playing"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在播放</a></li>
                        <li><a href=""><i class="icon-font icon-history"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;播放历史</a></li>
                        <li><a href=""><i class="icon-font icon-fav"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的收藏</a></li>
                    </ul>
                </div>
                <!-- 歌曲列表 -->
                <div class="list">
                    <table>
                        <!-- 列表头 -->
                        <thead>
                        <tr class="tb-head">
                            <th class="tb-space"></th>
                            <th>歌曲</th>
                            <th>演唱者</th>
                            <th>专辑</th>
                            <th>大小</th>
                            <th class="tb-space"></th>
                        </tr>
                        </thead>
                        <!-- 列表项 -->
                        <tbody id="tbody">       </tbody>
                    </table>
                </div>



                <!-- 歌曲信息 -->
                <div class="right-side">
                    <!-- 专辑封面 -->
                    <div class="album-cover">
                        <a href="">
                            <img src="imgs/校长 - 带你去旅行.jpg" alt="专辑封面">
                        </a>
                    </div>
                    <!-- 歌词 -->
                    <div class="album-lrc">
                        <ul>
                            <li class="lrc-line">带你去旅行 - 校长</li>
                            <li class="lrc-line">作词:朱贺</li>
                            <li class="lrc-line">作曲:朱贺</li>
                            <li class="lrc-line">编曲:王柏鸿</li>
                            <li class="lrc-line">今天妆令人特别着迷</li>
                            <li class="lrc-line">Oh 我说 baby</li>
                            <li class="lrc-line">出门前换上新的心情</li>
                            <li class="lrc-line">Oh 我的 lady</li>
                            <li class="lrc-line">你喜欢有小情绪</li>
                            <li class="lrc-line">像晴天的乌云</li>
                            <li class="lrc-line">头发长见识短的惊奇</li>
                            <li class="lrc-line">表情丰富令人着迷</li>
                            <li class="lrc-line">你的一切我都好奇像秘密</li>
                            <li class="lrc-line">安全带系好带你去旅行</li>
                            <li class="lrc-line">穿过风和雨</li>
                            <li class="lrc-line">我想要带你去浪漫的土耳其</li>
                            <li class="lrc-line">然后一起去东京和巴黎</li>
                            <li class="lrc-line">其实我特别喜欢迈阿密</li>
                            <li class="lrc-line">和有黑人的洛杉矶</li>
                            <li class="lrc-line">其实亲爱的你不必太过惊奇</li>
                            <li class="lrc-line">一起去繁华的上海和北京</li>
                            <li class="lrc-line">还有云南的大理保留着回忆</li>
                            <li class="lrc-line">这样才有意义</li>
                            <li class="lrc-line">今天妆令人特别着迷</li>
                            <li class="lrc-line">Oh 我说 baby</li>
                            <li class="lrc-line">出门前换上新的心情</li>
                            <li class="lrc-line">Oh 我的 lady</li>
                            <li class="lrc-line">你喜欢有小情绪</li>
                            <li class="lrc-line">像晴天的乌云</li>
                            <li class="lrc-line">头发长见识短的惊奇</li>
                            <li class="lrc-line">表情丰富令人着迷</li>
                            <li class="lrc-line">你的一切我都好奇像秘密</li>
                            <li class="lrc-line">安全带系好带你去旅行</li>
                            <li class="lrc-line">穿过风和雨</li>
                            <li class="lrc-line">我想要带你去浪漫的土耳其</li>
                            <li class="lrc-line">然后一起去东京和巴黎</li>
                            <li class="lrc-line">其实我特别喜欢迈阿密</li>
                            <li class="lrc-line">和有黑人的洛杉矶</li>
                            <li class="lrc-line">其实亲爱的你不必太过惊奇</li>
                            <li class="lrc-line">一起去繁华的上海和北京</li>
                            <li class="lrc-line">还有云南的大理保留着回忆</li>
                            <li class="lrc-line">这样才有意义</li>
                            <li class="lrc-line">我想要带你去浪漫的土耳其</li>
                            <li class="lrc-line">然后一起去东京和巴黎</li>
                            <li class="lrc-line">其实我特别喜欢迈阿密</li>
                            <li class="lrc-line">和有黑人的洛杉矶</li>
                            <li class="lrc-line">其实亲爱的你不必太过惊奇</li>
                            <li class="lrc-line">一起去繁华的上海和北京</li>
                            <li class="lrc-line">还有云南的大理保留着回忆</li>
                            <li class="lrc-line">这样才有意义</li>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部歌曲播放控制,音量,进度等 -->
        <div class="play-bottom">

            <!-- 播放控制 -->
            <div class="play-control">
                <a href="javascript:;" class="btn-pre" id="btn-pre"></a>
                <a href="javascript:;" class="btn-play" id="btnPlay"></a>
                <a href="javascript:;" class="btn-next" id="btn-next"></a>
            </div>

            <!-- 进度条 -->
            <div class="progress-info">
                <div class="play-info">
                    <a href="javascript:;" id="playingName">  </a>
                </div>

                <div class="play-length">
                    <div class="play-current">00:00</div>
                    <div class="play-progress" id="jdt">
                        <div class="play-panel"></div>
                        <div class="progress-control">
                            <a href="javascript:;" class="dot"></a>
                        </div>
                    </div>
                    <div class="play-duration">00:00</div>
                </div>
            </div>

            <!-- 声音控制 -->
            <div class="play-volume">
                <div class="volume-icon">
                </div>
                <div class="volume-wrap">
                    <div class="volume-panel"></div>
                    <div class="volume-control">
                        <a href="javascript:;" class="dot"></a>
                    </div>
                </div>    
            </div>
            <div class="play-state" id="play-state"><img src="imgs/0.png" alt=""></div>
        </div>
<!--        引入数据文件-->
        <script src="js/data.js"></script>
<!--        引入核心文件-->
        <script src="js/index.js"></script>
    </body>
</html>

javascript

Date.js

var musics = [
    {"ablum":"晴天","artist":"周杰伦","id":1,"name":"晴天","path":"musics/1592373302464.mp3","size":4147913,"style":"怀旧","uptime":1592373302000},
    {"ablum":"xxx","artist":"毛不易 ","id":2,"name":"消愁","path":"musics/1592373330188.mp3","size":8357216,"style":"民谣","uptime":1592373330000},
    {"ablum":"123","artist":"陈奕迅","id":3,"name":"十年","path":"musics/1592373363687.mp3","size":12050851,"style":"伤感","uptime":1592373363000},
    {"ablum":"xxx","artist":"校长","id":4,"name":"带你去旅行","path":"musics/1592383891287.mp3","size":3602925,"style":"民谣","uptime":1592383891000},
    {"ablum":"xxx","artist":"陈奕迅","id":4,"name":"淘汰","path":"musics/1592383891289.mp3","size":3602925,"style":"民谣","uptime":1592383891000}

]

index.js

//创建一个音频播放器对象
var player = document.createElement('audio');
//记录当前正在播放的歌曲的索引
var currentIndex = 0;
//声明一个标记,记录歌曲的播放状态
var isplay = false;


(function f() {
//绑定数据到页面中
    var html = '';
//循环遍历歌曲列表,根据歌曲数目在页面中生成对应的html代码
    for (var i = 0; i < musics.length; i++) {
        var  m = musics[i];
        html +=`<tr class="music-item" id="music-item" data-index="${i}">
                                <td class="tb-space"></td>
                                <td class="tb-space"></td>
                                <td><a href="javascript:;">${m.name}</a></td>
                                <td><a href="javascript:;">${m.artist}</a></td>
                                <td><a href="javascript:;">${m.ablum}</a></td>
                                <td>${fmtSize(m.size)}</td>
                                <td class="tb-space"></td>
                            </tr>`;
    }


    //将生成的html插入指定位置
    document.getElementById('tbody').innerHTML=html;
    //初始化播放源
    player.src = musics[currentIndex].path;

})()


function fmtSize(size) {
    size = size/(1024*1024);
    size = size.toFixed(1);
    return size +'MB';
}


//为列表触发点击事件中
var trs = document.querySelectorAll('.music-item');
for (var i=0 ;i < trs.length ;i++) {
    trs[i].addEventListener('click',function () {
        clearStatus();
        //获取元素上data-index属性的属性值(获取需要播放的歌曲列表项)
        var index = this.dataset.index;
        //记录当前正在播放的歌曲
        currentIndex = index;
        //需要获取播放的歌曲对象
        var m = musics[index];
        //为播放设置播放器
        player.src = m.path;
        //播放
        startPlay();
    })
}

function  startPlay() {

    //将状态标记为正在播放
    isplay = true;
    //播放
    player.play();
    //设置颜色
    trs[currentIndex].style.backgroundColor='#f0f0f0';
    //设置播放图标
    trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="imgs/playing-list.gif" alt="">';
    //将播放按钮的背景图片设置为暂停图标
    document.getElementById('btnPlay').className = 'btn-pause';
    //将正在播放的歌曲名显示到底部控制区域
    document.getElementById('playingName').innerText = musics[currentIndex].name;

}
function clearStatus() {
    //还原上一首正在播放的歌曲列表背景项背景色
    trs[currentIndex].style.backgroundColor = '';
    //清除当前行下的第一个单元格的内容(清除图标)
    trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="" alt="">';
}

function pausePlay(){
    //将播放状态标记为false
    isplay = false;
    //暂停播放
    player.pause();
    document.getElementById('btnPlay').className='btn-play';
}

//播放控制
document.getElementById('btnPlay').addEventListener('click',function () {
    if(isplay){
        pausePlay();
    }else {
        startPlay();
    }
})

//记录歌曲的当前播放时间
var now = 0;
//记录歌曲的总播放时间
var total = 0;
//当播放器数据被加载时触发
player.addEventListener('loadeddata',function () {
    //获取当前播放器的播放位置和总播放时长
    now = player.currentTime;
    total = player.duration;
    //将歌曲的播放时间显示在控制区域
    document.querySelector('.play-current').innerText = fmtTime(now);
    document.querySelector('.play-duration').innerText = fmtTime(total);
});

//为播放器绑定播放进度改变事件
player.addEventListener("timeupdate",updateProgress);

function updateProgress () {
    //获取最新的播放进度
    now = player.currentTime;
    //计算进度的百分比
    var p = now/total * 100 +'%';
    //为进度条元素设置宽度:
    document.querySelector('.progress-control').style.width = p;
    //更新最新播放时间
    document.querySelector('.play-current').innerHTML = fmtTime(now);
}


//格式化歌曲的播放时间
function fmtTime(time) {
    //秒转化为毫秒
    time *= 1000;
    //使用毫秒数构建一个日期对象
    time = new Date(time);
    var min = time.getMinutes();
    var sec = time.getSeconds();
    min = min < 10? '0'+ min:min;
    sec = sec < 10? '0'+ sec:sec;
    return min+':'+sec;
}
//初始化播放状态为列表循环
var ps=0;
var played = new Array();

document.getElementById('play-state').addEventListener('click',function () {
    ps = ps +1;
    if(ps%3==0){
        ps = 0;
    }
    document.getElementById('play-state').innerHTML = '<img src="imgs/'+ps+'.png" alt="">';
})

//设置切到下一首歌事件
function nextMusic() {
    //记录播放的歌曲
    played[played.length++] = currentIndex;
    //将状态清空
    clearStatus();
    if(ps==0){
        currentIndex++;
        if(currentIndex >= musics.length){
            currentIndex = 0;
        }
    }
    if(ps==1){
        var ran = parseInt(Math.random()*musics.length);
        while(currentIndex==ran){
            ran = parseInt(Math.random()*musics.length);
        }
        currentIndex = ran;
    }
    if(ps==2){
    }
    //重新为播放器设置播放源
    player.src = musics[currentIndex].path;
    //继续播放
    startPlay();
}

//设置切到上一首歌事件
function lastMusic() {
    //将状态清空
    clearStatus();
    if(played.length>0){
        currentIndex = played[played.length-1];
        played.pop();
    }
    //重新为播放器设置播放源
    player.src = musics[currentIndex].path;
    //继续播放
    startPlay();
}

//设置当歌结束时事件
player.addEventListener('ended',nextMusic)
//切换到上一首歌
document.getElementById('btn-pre').addEventListener('click',lastMusic);
//切换到下一首歌
document.getElementById('btn-next').addEventListener('click',nextMusic);


var now = 0;
var total = 0;
player.addEventListener('loadeddata',function () {
    now = player.duration;
    total = player.duration;
    console.log(now,total);
});

//设置进度条拖动
(function(boxArea,bar) {
    var press = false;
    //鼠标按下监听(设置进度条区域)
    document.querySelector(boxArea,bar).addEventListener('mousedown',function (e) {
        //解除播放器的移动
        player.removeEventListener('timeupdate',updateProgress);
        //设置按下事件
        move(e);
    });
    //鼠标松开监听(设置进度条区域)
    document.querySelector(boxArea,bar).addEventListener('mouseup',function () {
        player.currentTime = now;
        player.addEventListener('timeupdate',updateProgress);
        press = false;
    });

    //鼠标拖动事件
    document.querySelector(boxArea,bar).addEventListener('mousemove',function (e) {
        if(press){
            move(e);
        }

    });

//设置按下事件时改变位置事件
function move(e) {
    //点击事件和左边缘的距离
    var eventLeft = e.offsetX;
    document.querySelector(bar).style.width = eventLeft+'px';
    //进度条的长度
    var w = window.getComputedStyle(document.getElementById('jdt')).width;
    //设置百分比
    now = eventLeft/parseInt(w) * total;
    press = true;
}
})('.play-length','.progress-control')

css

index.css

.top{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #22425a;
}
.play-bottom{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background-color: #22425a;
}
.play-main{
    position: absolute;
    top:60px;
    left: 0;
    right: 0;
    bottom: 80px;
    background-color: #fff;
}
.container{
    position: relative;
    height: 100%;
}
.logo{
    float:left;
    width: 180px;
    height: 100%;
    padding-left:16px;
}
.logo h1{
    width: 164px;
    height: 100%;
    background: url('../imgs/xiami.png') no-repeat 0 50%;
}
.logo h1 a{
    display: block;
    width:100%;
    height: 100%;
}
.search{
    position: absolute;
    top:15px;
    left:240px;
    float: left;
    height: 30px;
    width:230px;
    border-radius: 15px;
    background-color: #aaaaaa;
    overflow: hidden;
}
.icono-search{
    position: absolute;
    top:8px;
    left:9px;
    display: block;
    width: 16px;
    height:16px;
    background: url('../imgs/search.png');
}

.search input{
    position: absolute;
    left: 35px;
    height: 100%;
    width:180px;
    border:0;
    color:#fff;
    background: transparent;
}
.main-wrap{
    display: flex;
}
.left-side,.right-side{
    position: relative;
    float:left;
    flex: 1;
    min-width: 190px;
}
.list{
    float:left;
    flex: 6;
    padding:10px;
    min-width: 380px;
}
.list table{
    width: 100%;
    border-collapse: collapse;
}
.tb-head{
    color:rgba(0,0,0,0.3);
}
.tb-space{
    width:100px;
}
.tb-head th{
    border-color: rgba(0,0,0,0.1) !important;
}
.list{
    overflow: auto;
}
::-webkit-scrollbar{
    width: 5px;
    height: 5px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb{
    width: 5px;
    background-color: rgba(0,0,0,0.1);
    border-radius:5px;
}
.list table tr th,.list table tr td{
    position: relative;
    padding: 10px 0;
    margin:0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-family: "微软雅黑";
    font-size: 10pt;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.music-item a{
    color:#000;
    text-decoration: none;

}
.music-item a:hover{
    text-decoration: underline;
}
.music-item:hover{
    background-color: #eee;
}

/* 左侧菜单部分 */

.icon-font{
    position: absolute;
    top:9px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
}
.icon-playing{
    background: url('../imgs/icon-playing.png') no-repeat;
}
.icon-recommend{
    background: url('../imgs/icon-recommend.png') no-repeat;
}
.icon-history{
    background: url('../imgs/icon-history.png') no-repeat;
}
.icon-rank{
    background: url('../imgs/icon-rank.png') no-repeat;
}
.icon-fav{
    background: url('../imgs/icon-fav.png') no-repeat;
}

.side-menu{
    position: absolute;
    top:10px;
    left: 10px;
    right:10px;
    bottom: 10px;
}

.side-menu a{
    position: relative;
    height: 36px;
    padding-left:10px;
    border-radius: 5px;
    line-height: 36px;
}
.side-menu a:hover{
    background-color: #eee;
}
.active{
    background-color: #ddd;
}

/* 右侧歌曲信息样式 */
.album-cover{
    position: relative;
    top:20px;
    bottom: 20px;
    text-align: center;
}
.album-lrc{
    position: absolute;
    left: 0;
    right: 0;
    top:225px;
    bottom: 0;
    overflow: auto;
}
.album-lrc ul{
    text-align: center;
    font-size: 12px;
}
.lrc-line{
    padding: 4px;
    text-align: center;
}

/*底部歌曲控制部分*/
.play-control{
    position: absolute;
    left: 0;
    height: 100%;
    width: 290px;
    text-align: center;
}
.play-control a{
    position: relative;
    display: inline-block;
    top:24px;
    width:32px;
    height: 32px;
    margin-left:32px;
    background-color: transparent;
}
.btn-play{
    background: url('../imgs/play-default.png') no-repeat;
    cursor: pointer;
}
.btn-play:hover{
    background: url('../imgs/play-active.png') no-repeat;
}
.btn-pause{
    background: url('../imgs/pause-default.png') no-repeat;
    cursor: pointer;
}
.btn-pause:hover{
    background: url('../imgs/pause-active.png') no-repeat;
}
.btn-pre{
    background: url('../imgs/pre-default.png') no-repeat;
    cursor: pointer;
}
.btn-pre:hover{
    background: url('../imgs/pre-active.png') no-repeat;
}
.btn-next{
    background: url('../imgs/next-default.png') no-repeat;
    cursor: pointer;
}
.btn-next:hover{
    background: url('../imgs/next-active.png') no-repeat;
}
/*播放方式*/
.play-state{
    position: absolute;
    right: 30px;
    top:15px;
    bottom: 20px;
    height: 40px;
    width: 40px;
}

/* 声音控制 */
.play-volume{
    position: absolute;
    right: 0;
    top:0;
    bottom: 0;
    height: 100%;
    width: 290px;
    text-align: center;
}
.volume-icon{
    position: absolute;
    left:50px;
    top: 30px;
    width: 20px;
    height: 20px;
    background: url('../imgs/volume-default.png') no-repeat;
    cursor: pointer;
}
.volume-icon:hover{
    background: url('../imgs/volume-active.png') no-repeat;
}

.volume-wrap{
    position: absolute;
    top: 38px;
    left:75px;
    width:100px;
    height: 3px;
    cursor:pointer;
}
.volume-panel{
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    background: rgba(255,255,255,0.2);
}
.volume-control{
    position: absolute;
    top: 0;
    left:0;
    width:30px;
    height: 3px;
    background: #fff;
}
.dot{
    position: absolute;
    display: inline-block;
    right: 0;
    top: -3px;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background: #fff;
}

/* 进度控制 */
.progress-info{
    position: absolute;
    left:290px;
    right: 290px;
    top: 0;
    bottom: 0;
    min-width:330px;
}

.play-info{
    position: absolute;
    top:20px;
    width: 100%;
    height: 18px;
    line-height: 18px;
}
.play-info a{
    color:#fff;
}
.play-info a:hover{
    text-decoration: underline;
}
.play-length{
    position: absolute;
    top: 43px;
    width: 100%;
    height: 20px;
    font-size:10px;
    color:rgba(255,255,255,0.4);

}
.play-current{
    position: absolute;
    left:0;
    width: 40px;
}
.play-duration{
    position: absolute;
    right: 0;
    width: 40px;
    text-align: right;
}
.play-progress{
    position: absolute;
    top:5px;
    left: 40px;
    right: 40px;
    height: 3px;
    cursor:pointer;
}
.play-panel{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    background: rgba(255,255,255,0.2);
}
.progress-control{
    position: absolute;
    z-index: 2;
    top: 0;
    left:0;
    width:0%;
    height: 3px;
    background: aqua;
}

reset.css

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{
  margin:0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
}
input,a,textarea{
  outline: none;
}
ul,ol{
 list-style: none;
}
a{
  display: block;
  color:rgb(152,152,152);
  text-decoration: none;
  font-size: 14px;
}

最后实现样式:
(实现自动切歌,进度条拖动,切歌,停歌,循环播放和随机循环)
在这里插入图片描述

  • 0
    点赞
  • 3
    评论
  • 11
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值