HTML+纯JS制作音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器。包括播放、暂停、上一曲和下一曲。
阅读本文章你需要对HTML、CSS和Javascript有基本的了解。
话不多说，先上图。
emmm。。。这样看起来有点单调。
我们把它加在网页上试试。
具体效果可以去我的个人网站查看http://tcxqq.top
好了，成品已经展示了接下来，开干吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/music.css">
</head>
<body>
<audio src="" id="mymusic"></audio>
<div class="music">
<div class="pic_div"> <img src="data:images/music/pictures/disc.png" alt="" class="disc"> <img src="data:images/music/pictures/default.jpg" alt="" id="music_pic"> <span class="dot"></span>
<div class="music_program">
<div id="prograss"></div>
</div>
<div class="time">
<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p>
</div>
<div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
</div>
</div>
</body>
<script src="js/music.js"></script>
</html>
先建好基本的HTML框架。
<audio src="" id="mymusic"></audio>为我们的音频
<div class="music">...</div>里面的部分为音乐的控件以及进度条，图片等。
<img src="data:images/music/pictures/disc.png" alt="" class="disc">为旋转的碟片
<img src="data:images/music/pictures/default.jpg" alt="" id="music_pic">为音乐专辑图片
<span class="dot"></span>为 碟片中间的小圆点
<div class="music_program"><div id="prograss"></div></div>
我们通过DIV嵌套一个div来作为音乐的进度条（图片红色部分），第一个div固定宽度，第二个div用%来设置宽度。
<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> 为时间显示 播放时长和总时长
<div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
控制菜单按钮 上一曲 播放/暂停 下一曲
下面是具体的css代码
@charset "utf-8";
/* CSS Document */
.music {
height: 150px;
width: 150px;
background:rgba(98,91,91,0.9);
}
.pic_div {
position: relative;
}
.dot {
width: 15px;
height: 15px;
background: #464545;
position: absolute;
border: 2px solid white;
border-radius: 50%;
top: 40px;
left: 85px;
}
.disc {
width: 100px;
position: absolute;
right: 5px;
transform: rotate(30deg);
}
#music_pic {
width: 100px;
position: absolute;
}
.music_program {
height: 2px;
width: 100px;
background: #555;
position: relative;
top: 100px;
}
.music_program div {
height: 100%;
width: 0%;
background: red;
}
.time {
width: 100px;
height: 20px;
position: relative;
top: 85px;
overflow: hide;
}
.time p {
padding-left: 33px;
}
.time p span:nth-of-type(2) {
padding: 0 5px;
}
.music_menu {
width: 150px;
height: 25px;
position: relative;
top: 85px;
}
.music_menu span {
width: 30px;
height: 25px;
display: inline-block;
cursor: pointer;
}
.music_menu span:nth-of-type(1) {
margin-left: 8px;
background: url(../images/music/pictures/back.png) no-repeat 7px;
}
.music_menu span:nth-of-type(2) {
margin-left: 14px;
background: url(../images/music/pictures/play.png) no-repeat 10px;
}
.music_menu span:nth-of-type(3) {
margin-left: 14px;
background: url(../images/music/pictures/forward.png) no-repeat 7px;
}
至于图片资源的话，博主是在站长素材下载的
链接
HTML+纯JS制作音乐播放器的更多相关文章
- JS实现音乐播放器
JS实现音乐播放器 前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...
- 原生JS实现音乐播放器！
前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...
- Android 音视频深入 十三 OpenSL ES 制作音乐播放器，能暂停和调整音量（附源码下载）
项目地址https://github.com/979451341/OpenSLAudio OpenSL ES 是基于NDK也就是c语言的底层开发音频的公开API,通过使用它能够做到标准化, 高性能,低 ...
- html5+css3 制作音乐播放器
//css// body , html{ margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; } .Mus ...
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- 每天看一片代码系列（三）：codepen上一个音乐播放器的实现
今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子,效果还是很赞的: codePen地址 HTML部分 首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放 ...
- 【重点突破】——Canvas技术绘制音乐播放器界面
一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求 点 ...
随机推荐
- 强制另存文件和加扩展名的代码c#
强制另存为文件+扩展名的代码using System;using System.Collections.Generic;using System.Linq;using System.Web; name ...
- 刷新物化视图sql
在plsql中新建command window,执行如下语句: exec dbms_mview.refresh('V_CTRL_POINT_PLAN_DATE'); -- V_CTRL_POINT ...
- SQA计划和系统测试规程
SQA计划和系统测试规程 一.SQA计划 1.软件工程 我们小组所做的项目是图书馆管理系统.我们要准确的了解此软件的需求(能够注册登录,查询图书,借书,还书,查看借阅记录等),在此前提进行建模,基于场 ...
- A标签中传递的中文参数到Servlet 后台request.getParameter()接收时出现中文乱码
package util; import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletRequ ...
- flex 分页
<?xml version="1.0" encoding="utf-8"?><s:Group xmlns:fx="http://ns ...
- python 求最大子序列
动态规划的本质,是对问题状态的定义和状态转移方程的定义.dynamic programming is a method for solving a complex problem by breaki ...
- SPSS-两变量相关性分析
两个变量之间存在确定性:关系和不确定关系(会存在一定的波动范围),就好比你的亲生母亲绝对只有一个,而你的亲叔叔可能有好几个(可以在1叔—4叔之间波动) 相关性一般分为 1:强正相关关系 (一个值 ...
- SSH整合 第四篇 Spring的IoC和AOP
这篇主要是在整合Hibernate后,测试IoC和AOP的应用. 1.工程目录(SRC) 2.IoC 1).一个Service测试类 /* * 加入spring容器 */ private Applic ...
- 一个CTO谈自己的技术架构体系
理解算法背后的世界观 我比较擅长的领域可能是数据和架构两个方面吧. 大数据方面就是数据挖掘.数据分析等领域,我现在带着极光推送整个的数据团队,需要把握数据团队的技术方向,还需要做很多算法方面的研究. ...
- IDEA14/Eclipse+Tomcat7热部署，jrebel6破解与eclipse配置
换了最新的eclipse,以前很多的插件都用不了,对于web开发的人来说,jrebel这种防重启神器必须要配备,防止修改类名.java文件.配置文件后的tomcat重启. 首先给一个下载地址: htt ...