当前位置：首页 > 全部内容 > JavaScript 实现简易音乐播放器完整代码解析

JavaScript 实现简易音乐播放器完整代码解析

作者：代码拾荒时间：2026-10-25 15:30:31浏览：108

本文详细介绍如何使用 JavaScript 实现一个简易的前端音乐播放器。内容涵盖音乐数据结构的定义、音频对象的创建、列表的动态渲染、播放控制逻辑（播放/暂停）、进度条交互以及歌曲切换功能的完整代码实现。适合前端初学者参考学习。

音乐播放器实现概述

本文分享了一个使用 JavaScript 实现音乐播放器的完整示例，供读者参考学习。

以下是音乐播放功能的核心 JavaScript 代码实现。

音乐数据与初始化

首先定义存储音乐信息的数组对象，用于管理播放列表数据。

该数据结构向前端网页提供必要的音乐元数据，并为后续 JavaScript 逻辑提供音乐文件路径。

 {
        ablum: "海阔天空",
        artist: "Beyond",
        id: 1,
        name: "大地",
        path: "musics/1592373302464.mp3",
        size: 4147913,
        style: "摇滚",
        uptime: 1592373302000
    },
    {
        ablum: "xxx",
        artist: "GALA ",
        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: "Bruno Mars ",
        id: 4,
        name: "Just The Way You Are",
        path: "musics/1592383891287.mp3",
        size: 3602925,
        style: "摇滚",
        uptime: 1592383891000
    },
    {
        ablum: "xxx",
        artist: "Jason Chen",
        id: 5,
        name: "童话",
        path: "musics/1592383916578.mp3",
        size: 4143707,
        style: "流行",
        uptime: 1592383916000
    },

接下来定义全局变量，用于控制播放器的状态和当前播放索引。

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

使用自调用函数（IIFE）来封装初始化逻辑，避免污染全局命名空间。

主要功能是通过循环遍历音乐数据数组，利用 HTML 字符串动态生成前端页面元素，并初始化当前播放源（通过 currentIndex 标记）。

(function() {
//绑定数据到页面中
    var html = '';
//循环遍历歌曲列表，根据歌曲数目在页面生成对应的html代码
    for (var i = 0; i < musics.length; i++) {
        var m = musics[i];
        //根据循环的次数创建对应的歌曲项
        html += `<tr class="music-item" data-index="${i}">
                 <td class="tb-space" style="text-align: center"></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插入到指定的dom节点中
    document.getElementById('tbody').innerHTML = html;
    //初始化播放源
    player.src=musics[currentIndex].path;
})();

列表交互与播放控制

为生成的音乐列表项添加点击事件监听器。

通过循环遍历所有音乐对象，为每一项绑定点击交互事件。

//为列表项触发点击事件
var trs = document.querySelectorAll('.music-item');
for (var i=0;i<trs.length;i++) {

    trs[i].addEventListener('click',function () {
        //清除状态
        clearstatus();
        var index = this.dataset.index;
        //记录当前播放的歌曲索引
        currentIndex=index;
        //获取需要播放的对象
        var m = musics[index];
        //设置播放源
        player.src=m.path;
        startPlay();
    })

由于同一时间只能播放一首歌曲，因此在播放当前音乐前，需先清除上一首音乐的播放状态（具体封装方法见下文）。

以下是相关功能方法的封装实现。

1. 清除上一首歌曲状态的方法；2. 开始播放方法（同时将全局变量 isplay 设置为 true）；3. 暂停播放方法（同时将全局变量 isplay 设置为 false）；4. 将总时长秒数转换为 mm:ss 格式；5. 将文件大小字节数转换为 MB 单位。

//清除上一首歌的歌曲状态
function clearstatus() {
    //还原上一首正在播放的歌曲表的背景颜色
    trs[currentIndex].style.background='';
    //清除当前行下的第一个单元格的内容（清除图标）
    trs[currentIndex].getElementsByTagName('td')[0].innerHTML=''
}
//开始播放
function startPlay() {
    //将状态标记为正在播放
    isplay=true;
    //播放
    player.play();
    //修改当前行的背景色
    trs[currentIndex].style.background='#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 pausePlay(){
    isplay=false;
    player.pause();
    document.getElementById('btnPlay').className='btn-play';
}
//格式化歌曲播放时间 mm:ss
function fmtTime(time) {
    time*=1000;
    //使用毫秒构建日期对象
    time=new Date(time);
    var m = time.getMinutes();
    var s = time.getSeconds();
    m=m<10?'0'+m:m;
    s=s<10?'0'+s:s;
    return m+':'+s;
}


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

实现播放控制按钮的交互逻辑。

即暂停和播放按钮的功能实现。通过判断全局变量 isplay 的值：若为 true 表示当前正在播放歌曲，点击按钮则执行暂停操作；反之则执行播放操作。

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

进度条与歌曲切换

动态更新界面上显示的当前歌曲播放时长与总时长。

//记录歌曲的当前播放时间
var now =0;
//记录歌曲的总播放时长
var total=0;
//当播放器的数据被加载时触发
player.addEventListener('loadeddata',function () {
    //获取当前播发器的播放位置以及总播放时长（单位s）
    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').innerText=fmtTime(now);
}

为播放器绑定播放完成事件以及上一首/下一首歌曲的切换逻辑。

同样需要清除上一首歌的播放状态，通过修改全局变量 currentIndex 即可实现歌曲切换。

//为播放器绑定播放完成事件
player.addEventListener('ended',function () {
    //清除上一首播放状态
    clearstatus();
    currentIndex++;
    if(currentIndex>=musics.length){
        currentIndex=0;
    }
    //重新为播放器设置播放源
    player.src=musics[currentIndex].path;
    //继续播放
    startPlay();
});

//上一首
document.querySelector('.btn-pre').addEventListener('click',function () {
    clearstatus();
    currentIndex--;
    if(currentIndex<0){
        currentIndex=musics.length-1;
    }
    //重新为播放器设置播放源
    player.src=musics[currentIndex].path;
    //继续播放
    startPlay();

});
//下一首
document.querySelector('.btn-next').addEventListener('click',function () {
    clearstatus();
    currentIndex++;
    currentIndex=currentIndex%musics.length;
    //重新为播放器设置播放源
    player.src=musics[currentIndex].path;
    //继续播放
    startPlay();
});

实现通过进度条控制歌曲播放进度的功能。

监听鼠标操作，获取鼠标点击落点，计算该点占进度条总长度的比例，结合简单的数学运算，根据歌曲总长度计算出鼠标落点对应的歌曲播放位置。

//改变歌曲的播放进度
(function(box,bar) {
    //监听鼠标是否按下
    var status=false;
    //鼠标按下事件监听
    document.querySelector(box).addEventListener('mousedown',function (e) {
        player.removeEventListener('timeupdate',updateProgress);
        move(e);
        status=true;
    })

    //鼠标抬起事件监听
    document.addEventListener('mouseup',function () {
        player.currentTime=now;
        player.addEventListener('timeupdate',updateProgress);
        status=false;
    })

    //鼠标移动事件监听
    document.querySelector(box).addEventListener('mousemove',function (e) {
        if(status==true){
            move(e)
        }
    })

    //鼠标滑动执行
    function move(e) {
        var eventLeft=e.offsetX;

        var w=window.getComputedStyle(document.querySelector(box)).width;
        var w1=window.getComputedStyle(document.querySelector('.play-current')).width;
        var w2=window.getComputedStyle(document.querySelector('.play-duration')).width;
        w1=parseInt(w1);
        w2=parseInt(w2);
        document.querySelector(bar).style.width=eventLeft+w1+'px';
        now=(eventLeft)/(parseInt(w)-w1-w2)*total;
        status=true;

        // var eventLeft=e.offsetX;
        // document.querySelector(bar).style.width=eventLeft+'px';
        // var w=window.getComputedStyle(document.querySelector(box)).width;
        // now=eventLeft/parseInt(w)*total;
        // status=true;

    }
})('.play-length','.progress-control');

以上内容即为本文介绍的 JavaScript 音乐播放器的完整实现，希望能为读者的学习提供帮助，欢迎大家继续支持本站。

作者最新文章

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00

JavaScript函数定义的三种方式：声明、表达式与箭头函数

2026-11-05 13:50:55

JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异

2026-11-05 12:47:23