1、文件列表
2、播放界面
3、代码
<!doctype html> <html> <head> <!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码--> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!--声明当前页面的三要素--> <title>音乐播放器V1版</title> <meta name="Keywords" content="关键词,关键词"> <meta name="description" content=""> <!--css,js--> <style type="text/css"> body{font-family:"微软雅黑";font-size:12px;background:#666;} .btn{text-decoration:none;font-size:14px;color:#fff;background:#dac7c0; padding:8px 12px;transition:all 0.6s ease-in;} .btn:hover{background:#999;transition:all 0.6s ease-in;} span{color:#fff;font-size:14px;} </style> </head> <body style="padding:20px;background:url('images/1.jpg')"> <a href="javascript:void(0);" onclick="tm_play()" class="btn">播放</a> <a href="javascript:void(0);" onclick="tm_stop()" class="btn">暂停</a> <span id="timer">00:00</span><span>/</span><span id="timer2">00:00</span> <script type="text/javascript"> //1.创建音乐播放器 var audio = document.createElement("audio"); //2.指定要播放的音乐 audio.src = "mp3/1.mp3"; //3.设置播放器加载成功以后执行的回调函数 audio.oncanplaythrough = function() { var totalTime = this.duration; //获取整个时长 var m = parseInt(totalTime / 60); //获取分钟 var s = parseInt(totalTime % 60); //获取秒数 var ms = (m < 10 ? ("0" + m) : m) + ":" + (s < 10 ? ("0" + s) : s); document.getElementById("timer").innerHTML = ms; } //4.监听音乐播放器的播放进度 audio.addEventListener("timeupdate",function() { var currentTime = this.currentTime; //获取当前已经播放的时长 var m = parseInt(currentTime / 60); //获取分钟 var s = parseInt(currentTime % 60); //获取秒数 var ms = (m < 10 ? ("0" + m) : m) + ":" + (s < 10 ? ("0" + s) : s); document.getElementById("timer2").innerHTML = ms; },false); //5.播放音乐 function tm_play() { audio.play(); } //6.暂停播放 function tm_stop() { audio.pause(); } </script> </body> </html>
4、重要知识点总结
var audio = document.createElement("audio");
A、获取整个音乐时长:audio.duration
B、获取当前已经播放的时长:audio.currentTime
C、播放音乐:audio.play()
D、暂停播放:audio.pause()
相关推荐
牧狼免刷新音乐播放器V1.0牧狼免刷新音乐播放器V1.0
3--[音乐播放器V1.0.Beta].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码3--[音乐播放器V1.0.Beta].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码3--[音乐播放器V1.0.Beta].zip源码scratch2.0 ...
[影音娱乐]完全自主开发的网页音乐播放器 v1.0_imusic.zip源码ASP.NET网站源码打包下载[影音娱乐]完全自主开发的网页音乐播放器 v1.0_imusic.zip源码ASP.NET网站源码打包下载[影音娱乐]完全自主开发的网页音乐播放器...
酷虎网音乐播放器 v1.0
简单音乐播放器来自下载之家,名为简单就是能够完整做为音乐播放器的全部功能.但我的目标是无广告,使用方便 1.软件为绿色版,打开马上添加(支持mp3.wav.wma)等常用的音乐格式。 2.带基本功能,单曲播放,单曲循环,顺序...
ASP实例开发源码—Simple Music Player 简洁大气的JavaScript音乐播放器 v1.0.zip ASP实例开发源码—Simple Music Player 简洁大气的JavaScript音乐播放器 v1.0.zip ASP实例开发源码—Simple Music Player 简洁大气...
scratch2源码音乐播放器V1.0.Beta本资源系百度网盘分享地址
ASP源码—Simple Music Player 简洁大气的JavaScript音乐播放器 v1.0.zip
基于ASP的Simple Music Player 简洁大气的JavaScript音乐播放器 v1.0.zip
音乐播放器V1.0.Beta-少儿编程scratch项目源代码文件案例素材.zip
ASP.NET-[影音娱乐]完全自主开发的网页音乐播放器v1.0.zip
音乐播放器欢迎大家使用 希望大家支持下 音乐播放器欢迎大家使用 希望大家支持下
[影音娱乐]完全自主开发的网页音乐播放器 v1.0_imusic(ASP.NET源码).rar
Android音乐播放器的简单实现,歌曲列表展示,单击列表播放,上一首,下一首,暂停/播放,进度条显示,进度条拖拽播放,播放完自动下一首,原博客地址:https://blog.csdn.net/u010356768/article/details/79066188
音乐播放器功能介绍: 1.这是一款非常简洁的mp3音乐播放器,界面美观,出自酷播官方; 2.播放器文件大小只有14KB,非常小,功能却很不错; 3.支持mp3格式的音乐播放,支持音量大小控制; 4.支持拖动进度播放;...
我上瘦身网·流行音乐在线播放器 v1.0
诚实可靠小郎君音乐播放器是一款免费的绿色版由网友小郎君制作的音乐播放器软件。这个播放器简单好用,带有在线搜索功能,功能实用,能为你播放高品质无损音乐,不仅支持播放本地歌曲,还支持在线搜索歌曲和歌词同步...
Treimu2是一个超级小巧的简单那的音乐播放器,绿色单文件,真的是没有最小,只有更小,区区28KB大小的音乐播放器,功能不多但是使用起来却是如此的人性化。这就是Treimu2。河源小编使用之后,感觉很爽、也很棒。其实...
名称:Simple Music Player 简洁大气的Javascript音乐播放器 作者:海兵大侠 版本:v1.0 更新:2013年10月9日 请到 http://git.oschina.net/hbdx/SimpleMusicPlayer 跟踪本项目的最新消息 使用方法:...
本次测试版播放器,作者不保留任何版权信息,相关设置在 xml/config.xml 修改. admin 文件夹为在线音乐列表管理系统,要求有支持 asp FSO 空间. 如无支持 asp FSO 空间,建议在本地使用生成菜单文件后上传至空间.获者...