慕课网electron写音乐播放器教程,代码跟随教程变动(十)
添加播放状态,首先是歌曲名称和时间
在index.html中添加
<div class="container fixed-bottom bg-white pb-4"> <hr/> <div class="row my-2" id="player-status"> </div> </div>
然后调用audio自带的歌曲加载完毕事件函数和当前播放时间函数
musicAudio.addEventListener('loadedmetadata', () =>{ //音乐文件加载完毕,开始渲染播放状态 renderPlayerHTML(currentTrack.filename, musicAudio.duration)//后面一个参数是获取歌曲长度,默认是以秒为单位,需要后续处理转化为分,秒的形式 }) musicAudio.addEventListener('timeupdate', () => { //更新播放器状态 updataProgressHTML(musicAudio.currentTime)//获取当前播放时间 })
再编辑渲染播放状态函数和播放时间更新函数
const renderPlayerHTML = (name, duration) => {//渲染播放状态函数 const player = $('player-status') const html = `<div class="col font-weight-bold"> 正在播放:${name} </div> <div class="col"> <span id="current-seeker">00:00</span> / ${duration} </div>` player.innerHTML = html } const updataProgressHTML = (currentTime) => { const seeker = $('current-seeker') seeker.innerHTML = currentTime }
到这里播放状态功能就已实现,但需要注意的是audio自带的歌曲长度和当前播放长度是以秒为单位,需要通过一定的算法转换为分秒的形式
exports.converDuration = (time) => { //计算分钟 const minutes = '0' + Math.floor(time / 60); const seconds = '0' + Math.floor(time - minutes * 60); return minutes.substr(-2) + ':' + seconds.substr(-2) }
然后开始制作进度条
向index.html中添加进度条
<div class="progress"> <div class="progress-bar bg-success" id="player-progress"role="progressbar" style="width: 0%;">0%</div> </div>
重新编辑播放器更新时间函数
musicAudio.addEventListener('timeupdate', () => { //更新播放器状态 updataProgressHTML(musicAudio.currentTime, musicAudio.duration)//获取当前播放时间 })
const updataProgressHTML = (currentTime, duration) => { const seeker = $('current-seeker') seeker.innerHTML = converDuration(currentTime) //计算播放的百分比 const progress = Math.floor(currentTime / duration * 100) const bar = $('player-progress') bar.innerHTML = progress + '%' bar.style.width = progress + '%' }