运用js教你轻松制作html音乐播放器
更新时间：2016年10月2日 16:19 点击：1884
用HTML做了个音乐播放器，可以循环播放，选择歌曲，以及自动播放下一首，运用了js和json知识，下面是效果图和源码，有兴趣的可以试试哦
效果图：
源码：html
<span style="color:#999999;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音乐播放器</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script src="js/music.js" type="text/javascript" charset="utf-8"></script>
<style>
* {
margin: 0 auto;
padding: 0;
}
.page {
position: absolute;
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 44px;
background: lightcoral;
position: relative;
}
.title {
font-size: 20px;
color: white;
float: left;
margin: 7px 10px;
}
.search {
float: right;
width: 30px;
margin: 7px 10px;
}
.earch {
float: right;
width: 30px;
margin: 7px 10px;
}
.musicBox{
width: 100%;
position: absolute;
top: 44px;
bottom: 50px;
background:url(音乐播放器资源/img/bg.jpg);
background-size:100% 100%;
/*内容超出范围部分滚动*/
overflow: scroll;
}
/*定义一条音乐的列表,每行的样式 在js中动态加载到音乐列表每一行的div上*/
.music{
width: 100%;
height: 60px;
border-bottom: 2px solid gray;
margin: 10px 20px;
position: relative;
}
.music img{
width: 40px;
height: 40px;
margin: 10px 20px;
}
.music p{
color: goldenrod;
position: absolute;
left: 85px;
top: 10px;
}
/*音乐播放时所对应的行的样式*/
.musicPlay{
background: rgba(120,10,60,0.4);
}
.musicPlay p{
color: red;
}
/*设置footer 的样式*/
.footer{
width: 100%;
height: 50px;
position: absolute;
bottom: 0px;
background: lightcoral;
}
.range{
width: 100%;
position: absolute;
top: -3px;
left: 0px;
}
.pic{
width: 30px;
height: 30px;
position: absolute;
left: 10px;
top: 12px;
border-radius: 15px;
animation: picAn 2s infinite linear;
}
@keyframes picAn{
from{}
to{transform: rotate(360deg);}
}
/*控制按钮的样式*/
.play{
width: 20px;
height: 20px;
position: absolute;
left: 45%;
top: 10px;
}
.pre{
width: 30px;
height: 30px;
position: absolute;
left: 0px;
top: 5px;
}
.next{
width: 30px;
height: 30px;
position: absolute;
right: 0px;
top: 5px;
}
.love{
position: absolute;
right: 5px;
top: 15px;
width: 20px;
height: 30px;
}
.musicControls{
position: absolute;
width: 50%;
left: 25%;
top: 10px;
}
</style>
</head>
<body>
<div class="page">
<audio id="audio"></audio>
<div class="header">
<h3 class="title">我的音乐</h3>
<img class="search" src="音乐播放器资源/img/search.png" />
<img class="earch" src="音乐播放器资源/img/earch.png" />
</div>
<!--显示音乐类表-->
<div class="musicBox">
<!--内容要通过读取json文件来获得 音乐列表-->
</div>
<!--控制台-->
<div class="footer">
<!--进度条-->
<input type="range" class=" range" />
<img src="音乐播放器资源/img/deng.jpg" class="pic" />
<!--控制按钮-->
<div class="musicControls">
<img src="音乐播放器资源/img/pre.png" class="pre" />
<img src="音乐播放器资源/img/play.png" class="play" />
<img src="音乐播放器资源/img/next.png" class="next" />
</div>
<img src="音乐播放器资源/img/shoucang.png" class="love" />
</div>
</div>
</body>
</html></span>
下面是js代码：
$(document).ready(function(){
//音乐播放器需要，播放器对象player，音乐对象，用play去播放music对象
// 创建music对象,用于保存音乐的属性
function Music(){
}
Music.prototype.src= "";
Music.prototype.img ="";
Music.prototype.num="";
Music.prototype.musicName="";
Music.prototype.name="";
//创建player对象
function Player(){
}
Player.prototype.audio = document.getElementById("audio");
// 目前播放第几首歌
Player.prototype.playIndex=0;
Player.prototype.isplay = false;
// 定义播放器的方法
Player.prototype.rangUpdate = function(){
//this.audio.ontimeupdate =function() 音乐播放器播放音乐时监听
//把进度条和音乐的时间长度结合起来
//音乐每播放一秒进读条就会前进一个单位 this.duration音乐的总长度
this.audio.ontimeupdate =function(){
//把进度条的总长度设为音乐的总长度
$(".range").attr("max",this.duration);
//设置进度条的值为播放的时间
$(".range").val(this.currentTime);
//当一首歌播放完再去播放下一首
if (this .currentTime == this.duration ) {
player.nextMusic();
}
}
};
Player.prototype.playMusic =function(){
//向播放器添加音乐路径
$(this.audio).attr("src",musicModels[this .playIndex].src);
this .audio.play();
//换音乐图片
$(".pic").attr("src",musicModels[this.playIndex].img);
//波让其的状态
this .isplay= true;
};
Player.prototype.nextMusic = function(){
//越界问题
if (this .playIndex >= musicModels.length - 1) {
this.playIndex = 0;
}else{
this.playIndex = this .playIndex + 1;
}
//改变音乐类表的对应项的样式
this.playMusic();
$(".music").eq(this.playIndex).addClass("musicPlay")
.siblings()
.removeClass("musicPlay");
};
Player.prototype.preMusic =function(){
if (this .playIndex <= 0) {
this.playIndex = musicModels.length-1;
}else{
this.playIndex = this .playIndex - 1;
}
//改变音乐类表的对应项的样式
this.playMusic();
$(".music").eq(this.playIndex).addClass("musicPlay")
.siblings()
.removeClass("musicPlay");
};
Player.prototype.playOrPause = function(){
if(this.isplay){
this.audio.pause();
$(".play").attr("src","音乐播放器资源/img/stop.png");
}else{
this.audio.play();
$(".play").attr("src","音乐播放器资源/img/play.png");
}
this.isplay = !this.isplay;
};
// js文件从此向下
// 创建音乐数组
var musicModels = [];
//创建音乐播放器对象
var player= new Player();
/*Ajax 目的是在js中实现异步操作
* JS是单线程 的，在单线程中模拟java oc 多线程 开辟异步任务，，浏览器的引擎去做一步操作，
* 实质上不是开辟一个子线程，而是创建一个异步任务
* 优点：
* 1.不需要用户等待服务器相应
* 在异步派发xmlHTTPRequest 请求后，马上把控制权收回就被返回浏览器空页面
* 界面不会出现白板，等待后台服务器得到请求后，再去执行完成方法，在方法中填写界面数据的代码
* 2.不需要加载整个页面只需要更新局部数据，节省流量，减轻服务器压力
*
* 为xmlHTTPRequest 设置一个回调函数，服务器数据到达时触发函数，发送请求时可以带少量的参数
* 实现按需去数据
*
$.ajax(),这是jQuery 对ajax的封装的最基础的函数，通过这个函数可以实现异步通讯功能
var configObj= {
// method:数据提交方式 get OR post
URL：请求的网址
async：是否异步，默认true
data：post请求的参数
dataType ：服务器返回的类型，xml string json
success:请求成功后的回调方法
error ：请求失败后的方法
}
$.ajax(configObj);完成异步请求
二、$post()只能采取post请求
三、$get()
四、$getJSON( url ,完成回调);可以请求本地路径的内容
*
*
* */
$.getJSON("pbl.json",function(data){
// console.log(data);
for (var i=0;i<data.length;i++) {
var music = new Music();
music.src= "音乐播放器资源/" + data[i].src;
music.img= "音乐播放器资源/" + data[i].img;
music.musicName = data[i].musicName;
music.name = data[i].name;
music.num = data[i].num;
musicModels.push(music);
}
//播放音乐
isertData();
player.playMusic();
player.rangUpdate();
$(".music").eq(player.playIndex).addClass("musicPlay")
.siblings()
.removeClass("musicPlay");
});
function isertData(){
//先要遍历数据源数组
/*
html5 中添加了一个data-*的方式 来自定义属性
用data-前缀，添加到自定义属性名上，
这样的结构可以存储少量的数据
* */
for (var i=0;i<musicModels.length;i++) {
// /创建一个DIV元素表示,音乐中的一行,给这个div添加music样式
//和绑定自定义属性index来记录这个div是列表中的第几行
var $musicDiv = $("<div class = 'music' data-index = "+ i +"></div>");
// 将这个div添加到musicBox 中
$(".musicBox").append($musicDiv);
// 设计musicdiv中的子元素,子元素有两个,一个是歌曲的图片,歌曲的信息
// 创建一个img 显示歌曲图片
var $img = (
"<img src =" + musicModels[i].img+" />");
$musicDiv.append($img);
// 创建一个音乐信息的p标签
var $musicMsg = $("<p>"+musicModels[i].musicName+" 演唱者："
+musicModels[i].name
+"</p>"
);
$musicDiv.append($musicMsg);
}
$(".music").click(
function(e){
//从被选中的div中读取自定义 index属性
player.playIndex = $(this ).data("index");
player.playMusic();
//被选中的div设置musicplay样式，该div的兄弟元素要溢出musicplay样式
//保证只有一个div有musicplay
$(this).addClass("musicPlay").siblings().removeClass("musicPlay");
}
);
}
$(".play").click(function(){
player.playOrPause();
});
$(".next").click(function(){
player.nextMusic();
});
$(".pre").click(function(){
player.preMusic();
});
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
上一篇: JavaScript 对象详细整理总结
下一篇: 利用Node.js获取项目根目录的小技巧
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式，可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash（哈希），hmac（密钥哈希），cipher...2014-06-07
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
- 1.什么是异步编程？ 异步编程是指由于异步I/O等因素，无法同步获得执行结果时， 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例： for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23