该篇文章会教你通过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制作音乐播放器的更多相关文章

  1. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  2. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  3. Android 音视频深入 十三 OpenSL ES 制作音乐播放器，能暂停和调整音量（附源码下载）

    项目地址https://github.com/979451341/OpenSLAudio OpenSL ES 是基于NDK也就是c语言的底层开发音频的公开API,通过使用它能够做到标准化, 高性能,低 ...

  4. html5+css3 制作音乐播放器

    //css// body , html{    margin:0;    padding:0;    font:12px Arial, Helvetica, sans-serif;    } .Mus ...

  5. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 10个免费开源的JS音乐播放器插件

    点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

  7. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  8. 每天看一片代码系列（三）：codepen上一个音乐播放器的实现

    今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子,效果还是很赞的: codePen地址 HTML部分 首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放 ...

  9. 【重点突破】——Canvas技术绘制音乐播放器界面

    一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求  点 ...

随机推荐

  1. 2018秋季c语言基础课第一次作业

    1)大学和高中最大的不同是没有人天天看着你,请看大学理想的师生关系是?有何感想? 答:邹欣老师提到了很多种关系,不外呼就是两种:平等或者不平等.平等的师生关系与陌生人无异,而自古以来尊师重道却被世人所 ...

  2. 2018.10.17 NOIP模拟 发电机（概率dp）

    传送门 考试空间开大了爆零不然只有30分爆栈? 话说这题真的坑1e7没法写dfsdfsdfs 其实很好推式子. 考虑每个点安一个发动机的概率,推一波式子做个等比数列求和什么的可以证明出来是严格的1si ...

  3. 2018.09.26洛谷P1084 疫情控制（二分+倍增）

    传送门 好题啊. 题目要求的最大值最小,看到这里自然想到要二分答案. 关键在于怎么检验. 显然对于每个点向根走比向叶节点更优. 因此我们二分答案之后,用倍增将每个点都向上跳到跳不动为止. 这时我们ch ...

  4. 2018.08.17 洛谷[POI2010]GRA-The Minima Game（线性dp）

    传送门 短代码神奇dp. 自己yy的思路居然1A了好高兴啊! 不难想到每个人选择的时候一定是取连续的最大的那一段数,自然需要先排序. 然后可以用dp[i]表示当前最大数是a[i]的时候先手可以获得的最 ...

  5. 为程序使用内存缓存（MemoryCache）

    为了程序的灵活性,可能为程序使用了XML等外部文件存储配置,但也有可能文件内容会被频繁读取,为了减少磁盘的读取次数,提高程序性能,可以将频繁读取的配置文件缓存到内存中,加速配置的读取.并且需要可以在配 ...

  6. TopK排序

    利用快速排序实现TopK排序 //返回支点的下标 int partition(int *arr, int low, int high) { //选取第一个元素为支点 int pivot = arr[l ...

  7. VBA替换函数

    Sub test() On Error Resume Next Dim arr1, arr2, i, j arr1 = Range("T1:EI3") arr2 = Range(& ...

  8. 关于on commit preserve rows与on commit delete rows的测试

    1:先分别建立两张表 sql> CREATE GLOBAL TEMPORARY TABLE tmp_session on commit preserve rows as select * fro ...

  9. ＃ing＃我的日常知识管理160421

    1. 知识来源:浏览是无时无刻的,知识爆炸的时代,信息在互联网上不再难以获得,却变得难以选择,取得有效的信息成了如今获取知识的重要环节…… 前端关注—— alloyteam.github.io  腾讯 ...

  10. Ubuntu14.04下安装Cuda8.0

    https://blog.csdn.net/sinat_19628145/article/details/60475696 https://developer.nvidia.com/cuda-down ...