添加播放状态,首先是歌曲名称和时间

在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 + '%'
}

  

慕课网electron写音乐播放器教程,代码跟随教程变动(十)的更多相关文章

  1. 基于jQuery虾米音乐播放器样式代码

    分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div c ...

  2. 微信小程序 写音乐播放器 slider组件 将value设置为0 真机测试滑块不能回到起点

    最近在用微信小程序写一个音频播放页面,做时间进度的时候用到了slider插件,但是在自然播放完成,或者上/下切换的时候,将slider的value属性值设为0,开发工具上滑块会回到起点,有效.但是真机 ...

  3. Android实现网络音乐播放器

    本文是一个简单的音乐播放器 布局代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayo ...

  4. android快捷简单的实现音乐播放器

    自己做了一个相对完整的音乐播放器,现在把播放模块提取出来,分享给大家.音乐播放器基本功能都实现了的,可能有些BUG,希望谅解. 播放器功能如下: 1.暂停,播放 2.拖动条实现,快进,快退 3.歌词同 ...

  5. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  6. [ 原创 ]学习笔记-做一个Android音乐播放器是遇到的一些困难

    最近再做一个安卓的音乐播放器,是实验室里学长派的任务,我是在eclipse上进行开发的,由于没有android的基础,所以做起来困难重重. 首先是布局上的困难 1.layout里的控件属性不熟悉 2. ...

  7. 基于jplayer实现歌词同步的JS音乐播放器效果

    分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <textare ...

  8. [MFC] MFC音乐播放器 傻瓜级教程 网络 搜索歌曲 下载

    >目录< >——————————————————————< 1.建立工程  1.建立一个MFC工程,命名为Tao_Music 2.选择为基本对话框 3.包含Windows So ...

  9. android音乐播放器开发教程

    android音乐播放器开发教程 Android扫描sd卡和系统文件 Android 关于录音文件的编解码 实现米聊 微信一类的录音上传的功能 android操作sdcard中的多媒体文件——音乐列表 ...

随机推荐

  1. Linux进程管理(四、 进程终结)

    进程调用exit()会终结当前进程,可以显式调用,也可以隐式: c语言main函数结束时编译器会自动加入exit调用 exit是系统调用,对应内核里的sys_exit() -> do_exit( ...

  2. JavaScript--关于变量提升思考

    下面例子仅仅是思考变量提升使用: 在实际开发中并不推荐使用相同名字的变量和函数! // 如果变量和函数同名的话,函数优先提升 console.log(a); function a() { consol ...

  3. 洛谷 P1829 [国家集训队]Crash的数字表格 / JZPTAB(莫比乌斯反演)

    题意:求$\sum_{i=1}^{n}\sum_{j=1}^{m}lcm(i,j)$. 开始开心(自闭)化简: $\sum_{i=1}^{n}\sum_{j=1}^{m}lcm(i,j)$ =$\su ...

  4. 51nod 1686 第K大区间【离散化+二分】

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1686 题意: 定义一个区间的值为其众数出现的次数. 现给出n ...

  5. 2018-12-25-C#-使用转换语义版本号

    title author date CreateTime categories C# 使用转换语义版本号 lindexi 2018-12-25 09:25:41 +0800 2018-06-29 12 ...

  6. SDUT-2121_数据结构实验之链表六:有序链表的建立

    数据结构实验之链表六:有序链表的建立 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入N个无序的整数,建立一个有序链 ...

  7. @NOIP2018 - D2T2@ 填数游戏

    目录 @题目描述@ @题解@ @代码@ @题目描述@ 小 D 特别喜欢玩游戏.这一天,他在玩一款填数游戏. 这个填数游戏的棋盘是一个 n×m 的矩形表格.玩家需要在表格的每个格子中填入一个数字(数字 ...

  8. 17-2 orm单表操作和多表操作

    参考:https://www.cnblogs.com/liwenzhou/p/8660826.html 一  ORM单表操作 1 增删改查 1. 查询 1. 查所有 models.Publisher. ...

  9. jmeter日期处理beanshell(1)

    import java.time.LocalDate; //昨天: String sdate1 = LocalDate.now().minusDays(1).toString(); vars.put( ...

  10. day6_python之json序列化和反序列化

    json作用:用来保存当前状态 1.使用json.dumps序列化把dic字典存到文件中 dic={'name':'egon','age':18} print(json.dumps(dic)) #得到 ...