2023年7月11日发(作者：)

HTML在线播放⾳乐实例,⼀步⼀步实战HTML⾳乐播放器（⽰例代码）在这⾥我⽤HTML5从头开始⼀步⼀步来制作⼀个简约的⾳乐播放器，⼤家可以参考⼀下，接下来正式开始。⾳乐播放器效果播放器分析这⾥将播放器分两块来做：视图层(html + css)逻辑层 ( js )视图层分析视图中包含：播放器容器播放器名称⾳乐专辑图⾳乐信息歌曲名歌⼿专辑名控制区上⼀曲播放下⼀曲播放进度条播放时间当前时间歌曲总时间⾳频控件页⾯背景逻辑层分析逻辑层处理包括：加载歌单渲染歌曲信息专辑图歌曲名歌⼿专辑名歌曲时长歌曲⾳频地址监听控制按钮播放按钮 (修改播放状态)上⼀曲(判断歌单边界，重新渲染歌曲信息)下⼀曲(判断歌单边界，重新渲染歌曲信息)定时器同步歌曲当前时间和播放进度条歌曲播放完，⾃动切换下⼀曲好了，播放器基本分析完成，接下来开始编码了，先进⾏视图层的编写。视图层结构编写根据我在上⾯的视图层分析，来构建HTML结构。建⽴，结构编码如下：⾳乐播放器好了，结构编写完毕，接下来编写视图层样式。视图层样式编写注：这⾥我是⽤LESS写的CSS，后⾯我会贴出完整代码，或者到 CSDN CODE 下载源码先重置标记样式：html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display:block;}body {line-height:1;}ol, ul {list-style:none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}table {border-collapse:collapse;border-spacing:0;}设置body：//这⾥主要设置背景和flex布局，⽤于播放器垂直居中@body-bg: #111;html,body{height: 100%;}body{background-color: @body-bg;display: flex;align-items: center;justify-content: center;color: #fff;font: 16px "微软雅⿊";}设置播放器容器 .player：//主要设置播放器的⼤⼩、背景颜⾊、定位等信息@player-bg:lighten(@body-bg,10%);@player-w:375px;@player-h:550px;.player{width: @player-w;height: @player-h;background-color: @player-bg;border-radius: 10px;position: relative;}设置播放器名称.header样式：.player{.header{padding: 15px 0;text-align: center;}}专辑图.albumPic样式：.player{.albumPic{background-size: cover; //背景模式width: @player-w * 0.72; //通过计算设置宽⾼，可直接⽤百分⽐height: @player-w * 0.72;margin: auto; //居中border-radius: 10px;}}专辑信息区域样式：.player{.trackInfo{text-align: center;padding: 20px 0 15px;font-size: 14px;white-space: nowrap;//单独将歌曲名设置⼀下⼤⼩.name{font-size: 24px;margin-bottom: 10px;font-weight: bold;}}}播放进度条样式：.player{.progress{width: 30%; //这⾥⽤于看效果，制作完成后，设置为0height: 20%;position: absolute; //⽤绝对定位放到播放器容器最下⾯和最左⾯bottom: 0;left: 0;background-image: linear-gradient(top, rgba(255, 255, 255, 0), #0099FF); //背景采⽤从上到下的线性渐变border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;opacity: .4;}}按钮控制区域样式设置：.player{.controls{//位置⽅⾯不⽤再额外设置了，按照对上⾯的设置，当前控制区的位置正好position: relative;//播放按钮同样采⽤flex布局，⽤于对内部的⽹络字体按钮垂直居中.play{cursor: pointer;width: 75px;height: 75px;border: 2px solid #ccc;border-radius: 50%; //加个圆框margin: auto;display: flex;align-items:center;justify-content:center;color: #fff;font-size: 35px;&:hover{font-size: 40px; //⿏标经过变⼤字体}}//上、下⼀曲 共⽤样式.btn(){cursor: pointer;position: absolute;top: 25px;font-size: 30px;&:hover{font-size: 32px;}}//设置⼀下按钮位置.previous{.btn;left: 60px;}.next{.btn;right: 60px;}}}播放时间区域设置：.player{.time{width: @player-w - 40px; //计算pdding后的宽度，可⾃⾏计算display: flex;position: absolute;bottom: 0;padding: 20px;align-items: center;justify-content: space-between; //两端分布}}好了，通过上⾯的样式设置，播放器的视图层已完毕，看下效果(三个播放控制按钮是引⽤的字体)：接下来开始编写逻辑层。逻辑层编写逻辑层⽤到了Jquery和歌曲清单数据，先引⽤⼀下：就是⼀堆json的歌单数据，数据是从⽹易云⾳乐上获取的，基本内容如下：//因为做静态页有跨域问题，所以就直接把数据拿出来赋值给`playlist`这个对象上了，下⾯只保留了需要⽤到的数据对象var playlist = {"result": {"tracks": [{"name": "歌曲名","artists": [{"name": "演唱者",}],"album": {"name": "专辑名","picUrl":专辑图","duration": 时长(ms),"mp3Url": "⾳乐地址"},...//等等等],},};建⽴，开始编码：先定义⼀个播放状态对象playStatus：//当前播放器状态var playStatus = {currentTrackLen: , //歌单歌曲数currentTrackIndex: 0, //当前播放的歌曲索引，默认加载第⼀⾸歌currentTime: 0, //当前歌曲播放的时间currentTotalTime: 0, //当前歌曲的总时间playStatus: true, //true为播放状态，false为暂停状态};因为要⽤到时间的转换，所以编写⼀个时间转换函数：var timeConvert = function(timestamp){var minutes = (timestamp / 60);var seconds = (timestamp - (minutes * 60));if(seconds < 10) {seconds = '0' + seconds;}timestamp = minutes + ':' + seconds;return timestamp;};接下来编写⼀个对象，内部⽅法是控制播放器的：//播放器控制⽅法对象var playerControls = {//歌曲基本信息设置trackInfo: function(args){//playerlist是中的歌单数据，根据需求进⾏数据读取即可var obj = [tTrackIndex];args = args || {name:,artist:s[0].name,album:,albumPic: + '?param=270y270',total:on,src: 3Url,};$('.player .trackInfo .name').text();$('.player .trackInfo .artist').text();$('.player .trackInfo .album').text();$('.player .albumPic').css('background','url(' + ic + ')');$('.player .time .total').text(timeConvert( / 1000)); //因为歌单数据中的播放长度⽤ms表⽰的，所以这⾥ / tTotalTime = ( / 1000);$('#audio source').attr('src',); //切换⾳乐通过修改中的src},//播放、暂停状态处理playStatus: function(){$('.player .controls .play i').attr('class', 'icon-' + (atus?'pause':'play'));if(atus){//⽤jquery获取对象，必须加上[0]$('#audio')[0].play();}else{$('#audio')[0].pause();}},//当前时间和进度处理playTime: function(){$('.player .time .current').text(timeConvert(tTime));$('.player .progress').css('width', tTime / tTotalTime * 100 + '%'); //同步进度条}};还剩下⼀个初始化⽅法了：var init = function(){//置⼀下歌曲信息和播放状态nfo();atus();//播放按钮事件监听$('.player .controls .play').click(function(){//修改播放状态atus = !atus;//置播放信息atus();});//上⼀曲按钮事件监听$('.player .controls .previous').click(function(){//边界判断if(tTrackIndex - 1 < 0){alert('已经没有上⼀⾸了');}else{tTrackIndex --;}//此处切换歌曲功能，原来打算采⽤直接修改src的⽅法实现，但是修改src后，之前播放的⾳乐还继续播放着，切换后的⾳乐却不播放，所以最终采⽤移除，再加⼊的⽅式来切换⾳乐$('#audio').remove();$('.player').append('');//更新⾳轨信息和播放状态nfo();atus();});//下⼀曲按钮事件监听$('.player .controls .next').click(function(){if(tTrackIndex + 1 >= tTrackLen){alert('已经没有下⼀⾸了');}else{tTrackIndex ++;}//换src的⽅法没法切换声⾳，试了好⼏种⽅法都不⾏，只能删了再重建了$('#audio').remove();$('.player').append('');nfo();atus();});//⽤时钟来实时修改当前播放时间及播放完当前曲⽬⾃动下⼀曲setInterval(function(){tTime = $('#audio')[0].currentTime;me();if(tTime >= tTotalTime){$('.player .controls .next').click();}}, 300);};其后，再加⼊init()执⾏⼀下就OK了。完整代码：H5⾳乐播放器⾳乐播放器：@import '';@import '';html,body {height:100%;}body {background-color:#111111;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#fff;font:16px "微软雅⿊";}.player {width:375px;height:550px;background-color:#2b2b2b;border-radius:10px;position:relative;}.player .header {padding:15px 0;text-align:center;}.player .albumPic {background-size:cover;width:270px;height:270px;margin:auto;border-radius:10px;}.player .trackInfo {text-align:center;padding:20px 0 15px;font-size:14px;white-space:nowrap;}.player .trackInfo .name {font-size:24px;margin-bottom:10px;font-weight:bold;}.player .progress {width:0;height:20%;position:absolute;bottom:0;left:0;background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0), #0099ff);background-image:linear-gradient(top, rgba(255, 255, 255, 0), #0099ff);border-bottom-left-radius:10px;border-bottom-right-radius:10px;opacity:.4;}.player .controls {position:relative;}.player .controls .play {cursor:pointer;width:75px;height:75px;border:2px solid #ccc;border-radius:50%;margin:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-size:35px;}.player .controls .play:hover {font-size:40px;}.player .controls .previous {cursor:pointer;position:absolute;top:25px;font-size:30px;left:60px;}.player .controls .previous:hover {font-size:32px;}.player .controls .next {cursor:pointer;position:absolute;top:25px;font-size:30px;right:60px;}.player .controls .next:hover {font-size:32px;}.player .time {width:335px;display:-webkit-box;display:-webkit-flex;