纯前端语言编写音乐播放器

html代码
index.html


<!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="btnpre"></a><a href="javascript:;" class="btn-play" id="btnPlay"></a><a href="javascript:;" class="btn-next" id="btnnext"></a></div><!-- 进度条 --><div class="progress-info"><div class="play-info"><a href="" id="playingName"></a></div><div class="play-length"><div class="play-current">00:00</div><div class="play-progress"><div class="play-panel"></div><div class="progress-control"><a href="javascript:;" class="dot"></a></div></div><div class="play-duration">05:22</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><!--引入数据文件--><script src="js/data.js"></script><!--引入核心js文件--><script src="js/index.js"></script></body>
</html>

css代码
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;
}

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-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.5);
}
.volume-control{position: absolute;top: 0;left:0;width:5%;height: 3px;background: #fff;
}
.dot{position: absolute;display: inline-block;right: 0;top: -3px;height: 10px;width: 5px;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: #fff;
}

JavaScript代码
data.js

//json对象(不是字符串)
var musics = [{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},{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},{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},{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}
]

index.js

//创建音频播放器对象
var player = document.createElement('audio');
//记录当前正在播放的歌曲的索引
var currentIndex = 0;
//声明一个标记,记录歌曲的播放状态(是否播放)
var isplay = false;
//绑定数据到页面中
//循环遍历歌曲列表,根据数目在页面中生成对应的html代码
(function () {var 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()//获取元素上data-index属性的属性值(获取需要播放的歌曲列表项)var index = this.dataset.index;//记录当前正在播放的歌曲currentIndex = index;//获取需要播放的歌曲对象var m = musics[index];//为播放器设置播放源player.src = m.path;//播放startPlay();})//使用函数闭包的方式获取点击的列表项索引// trs[i].addEventListener('click',(function(index){//     return function(){//         alert(index)//     }// }(i)))}//开始播放
function startPlay() {//设置为播放状态isplay = true;//播放player.play();//修改当前的背景色trs[currentIndex].style.backgroundColor = '#f0f0f0';//修改当前的giftrs[currentIndex].getElementsByTagName('td')[0].innerHTML = '<img src="imgs/playing.gif">'// this.querySelector('td:nth-child(1)')//将播放按钮的背景图片设置为暂停图标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 = '';
}//暂停播放
function pausePlay() {//将播放状态标记为falseisplay = 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;
//记录歌曲当前的音量
var volume = 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', function () {//     //获取最新的播放进度
//     now = player.currentTime;
//     //计算进度的百分比
//     var p = now / total * 100 + '%';
//     //为进度条元素设置宽度
//     document.querySelector('.progress-control').style.width = p;
//     //更新最新播放时间
//     document.querySelector('.play-current').innerText = fmtTime(now);
// })
//为播放器绑定播放完成事件
player.addEventListener('ended', function () {console.log('歌曲播放完成...')//清除上一首播放状态clearStatus();currentIndex++;if (currentIndex >= musics.length) {currentIndex = 0;}//重新为播放器设置播放源player.src = musics[currentIndex].path;//继续播放startPlay();
});
//为播放器绑定播放下一首事件
document.getElementById('btnnext').addEventListener('click', function () {clearStatus();currentIndex++;if (currentIndex >= musics.length) {currentIndex = 0;}//重新为播放器设置播放源player.src = musics[currentIndex].path;//继续播放startPlay();
});
//为播放器绑定播放上一首事件
document.getElementById('btnpre').addEventListener('click', function () {clearStatus();currentIndex--;if (currentIndex <= 0) {currentIndex = musics.length;}//重新为播放器设置播放源player.src = musics[currentIndex].path;//继续播放startPlay();
});
//当播放进度改变时执行以下函数
player.addEventListener('timeupdate', updateProgress);function updateProgress() {//获取当前最新的进度now = this.currentTime;//根据歌曲的当前播放进度和总进度获取进度条的实时宽度var width = now / total * 100 + '%';//设置进度条的css中width属性document.querySelector('.progress-control').style.width = width;//将时间显示到界面中document.querySelector('.play-current').innerText = fmtTime(now);
}//当声音改变是执行以下函数
player.addEventListener('volumechange', updatevolume);function updatevolume() {//设置当前的音频播放器的音量为0volume = this.volume;//根据当前的音量和默认音量获取音量的实施大小var width = volume / 1 * 100 + '%';//设置音量条的css中width属性document.querySelector('.volume-control ').style.width = width;}
//  滑动音量键改变音量大小
(function (box,bar) {//监控变量，监控鼠标是否按下var status = false;//鼠标按下事件监听document.querySelector(box).addEventListener('mousedown', function (e) {//解除音量改变事件player.removeEventListener('volumechange', updatevolume);move(e)// status = true;})//鼠标抬起事件监听document.addEventListener('mouseup', function () {//更新播放进度player.volume = volume;//重新音量改变事件player.addEventListener('volumechange', updatevolume);status = false;})//鼠标移动时事件监听document.querySelector(box).addEventListener('mousemove', function (e) {if (status == true) {move(e);}})//鼠标滑动执行function move(e) {//点击事件与左边缘的距离var eventLeft = e.offsetX;document.querySelector(bar).style.width = eventLeft + 'px';var w = window.getComputedStyle(document.querySelector('.volume-panel ')).width;//获取音量当前所在位置volume = eventLeft / parseInt(w) ;//设置鼠标状态为按下status = true;}
})('.volume-panel ', '.volume-control');
// 滑动进度条改变歌曲播放进度
(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;document.querySelector(bar).style.width = eventLeft + 'px';var w = window.getComputedStyle(document.querySelector('.play-panel')).width;//获取播放器当前所在位置now = eventLeft / parseInt(w) * total;//设置鼠标状态为按下status = true;}
})('.play-length', '.progress-control');//参数为可触发事件的进度条所在盒子类，进度条类
//工具函数,格式化歌曲的播放时间为 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';
}//保留一位小数点
function returnFloat1(value) {value = Math.round(parseFloat(value) * 10) / 10;if (value.toString().indexOf(".") < 0) {value = value.toString() + ".0";}return value;
}

效果图:

所有源码基本上我都放在上面了,如果想要项目的,可以去我上传的资源里面看看!

纯前端语言编写音乐播放器相关推荐

c语言编写音乐播放器完整代码（mciSendString函数的使用方法,第一次使用Visual Studio 2019的详细步骤）
本文会尽量让和笔者一样只有一点点可怜的c语言基础的小白看懂,并写出自己的音乐播放器. 笔者使用的编译器是Visual Studio 2019,直接在官网下载就行了.下面是Visual Studio 2 ...
编写音乐播放器的一些感想
编写音乐播放器的一些感想当初是想着学习C#,就动手开始实现一个简单的播放器.在实现的工程中发现自己能够学到很多东西,就有了把播放器用c++重写的想法,在实现过程中,发现c++想实现c#同样的功能,真 ...
使用go语言编写一个播放器
使用go语言编写一个播放器,直接看效果整体思路是使用ffmpeg解码,然后使用xui进行渲染,音频播放暂时还没调通,以下是源码 package mainimport ("github.co ...
pygame编写音乐播放器
pygame编写音乐播放器 1.准备工作 2.开始 2.1 设计说明 2.2 代码逻辑收集某个目录下的所有mp3 显示歌曲名称播放歌曲显示播放进度快进快退功能画播放控件主逻辑 3.效果图 ...
C语言实现音乐播放器 visual studio 2019
这是一款基于easyx图形库和C/C++编写的音乐播放器,参考了网上许多大佬友情分享的项目设计,结合自己的理解加以设计和制作,给有同样需求的朋友一点参考.文中放上了个人感觉很有帮助的文章,建议可以参考 ...
单片机音乐播放器课程设计C语言,单片机音乐播放器课程设计中音乐代码怎么弄...
单片机音乐播放器课程设计中音乐代码怎么弄答案:2 信息版本:手机版解决时间 2019-10-06 13:16 已解决 2019-10-06 02:07 单片机音乐播放器课程设计中音乐代码怎么弄 ...
python音乐播放器代码_pygame编写音乐播放器的实现代码示例
1.准备工作 ide:pycharm python:3.7 三方包:pygame.pyinstaller.mutagen 几首mp3格式的歌 2.开始 2.1 设计说明 1.包含上一首.下一首.暂停 ...
超级炫酷界面C++编写音乐播放器，免费开源代码！
VB编写的一套MP3音乐播放机程序,界面模仿了鼎鼎大名的Winamp播放器,使用了增强型的皮肤插件,资源文件完整.打开Qt Creator,创建一个new project,项目名称随你喜欢(我的是Mu ...
C语言实现音乐播放器(Linux madplay)
(一)需求分析 1.扫描指定路径下的音乐,并显示出来 2.实现音乐的播放.暂停.上一首和下一首的功能 3.程序退出释放内存资源 (二)思路 1.扫描出指定路径下的音乐文件(便利指定文件夹,找出音频文件 ...

纯前端语言编写音乐播放器

纯前端语言编写音乐播放器

所有源码基本上我都放在上面了,如果想要项目的,可以去我上传的资源里面看看!

纯前端语言编写音乐播放器相关推荐

最新文章

热门文章