html怎么设置自动音乐播放器,运用js教你轻松制作html音乐播放器
用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦
效果图:
源码:html
音乐播放器
* {
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;
}
我的音乐
下面是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
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
// /创建一个DIV元素表示,音乐中的一行,给这个div添加music样式
//和绑定自定义属性index来记录这个div是列表中的第几行
var $musicDiv = $("
// 将这个div添加到musicBox 中
$(".musicBox").append($musicDiv);
// 设计musicdiv中的子元素,子元素有两个,一个是歌曲的图片,歌曲的信息
// 创建一个img 显示歌曲图片
var $img = (
"");
$musicDiv.append($img);
// 创建一个音乐信息的p标签
var $musicMsg = $("
"+musicModels[i].musicName+" 演唱者:"
+musicModels[i].name
+"
"
);
$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();
});
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
html怎么设置自动音乐播放器,运用js教你轻松制作html音乐播放器相关推荐
- java制作音乐播放器教程_教你轻松制作java音乐播放器
一.音乐播放器的实现原理 Javase的多媒体功能很弱,所以有一个专门处理多媒体的插件叫JMF,JMF提供的模型可大致分为七类 * 数据源(Data source) * 截取设备(Capture De ...
- 教你轻松拿下百度音乐播放器mp3地址
教你轻松拿下百度音乐播放器mp3地址----ldfu2010 如果你想做一个类似百度或谷歌或QQ音乐那样的flash播放器,你最需要最重要的事情是什么?播放器什么做?我觉得应该不是,而是你的音乐mp3 ...
- 网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布,支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
- 计算机怎么把音乐调出来怎么办,五步教你轻松调出好音乐,汽车音响调音就是这么简单-音频管理器怎么设置...
很多的车主兴冲冲的去改装店进行汽车音响改装,而且对于改装后是抱有很大的希望,结果汽车音响改装完毕后,却大失所望,甚至于有种上当受骗的感觉.这改的什么音响,都没我的原车音响的音质好!几经纠结,改装店有改 ...
- python中装饰器修复技术_12步轻松搞定Python装饰器
作为一名教python的老师,我发现学生们基本上一开始很难搞定python的装饰器,也许因为装饰器确实很难懂.搞定装饰器需要你了解一些函数式编程的概念,当然还有理解在python中定义和调用函数相关语 ...
- python 找到装饰器_[译] 12步轻松搞定python装饰器
呵呵!作为一名教python的老师,我发现学生们基本上一开始很难搞定python的装饰器,也许因为装饰器确实很难懂.搞定装饰器需要你了解一些函数式编程的概念,当然还有理解在python中定义和调用函数 ...
- 51单片机的四路抢答器c语言,用51单片机制作4路抢答器
此抢答器具有限时抢答,超时无效的特点,并可以对主持人未喊开始而提前抢答的犯规情况作出判断. 由于用了单片机,所以电路很简单.懒得写译码程序,也不想做驱动电路.干脆直接用了一片74LS48译码驱动器来驱 ...
- 用python可以免费下载音乐吗-Python 教你轻松下载网易音乐歌曲
前两篇文章收集了歌手信息和歌词,光有歌手信息和歌词没有歌曲怎么行,那不是耍流氓吗?正好今天周末,给大家发点福利,喜欢听音乐的同学有福了,这篇文章直接把网易云音乐歌手的热门歌曲 50 首全部免费下载下来 ...
- python下载mp3_Python 教你轻松下载网易音乐歌曲
前两篇文章收集了歌手信息和歌词,光有歌手信息和歌词没有歌曲怎么行,那不是耍流氓吗?正好今天周末,给大家发点福利,喜欢听音乐的同学有福了,这篇文章直接把网易云音乐歌手的热门歌曲 50 首全部免费下载下来 ...
- Python 教你轻松下载网易音乐歌曲
点击上方"brucepk",选择"置顶公众号" 第一时间关注 Python 技术干货! " 阅读文本大概需要 2.8 分钟 前两篇文章收集了歌手信 ...
最新文章
- 使用SIFT特征提取和K-Means方法对图片进行分类
- css笔记 - transform学习笔记(二)
- Python基础——Anaconda的安装使用
- ecshop 模板 php代码,ecshop无法在模板文件.dwt和.lbi中直接添加php代码的解决方法...
- mysql查询前段时间_没想到!我在简历上写了“精通MySQL”,阿里面试官跟我死磕后就给我发了高薪offer...
- 为什么程序员愿意加入管理糟糕的创业公司?
- 集合框架-Collection与List集合
- 数据导出到excel文件给客户端下载的几种方法
- mysql 查询缓存及设置
- nginx代理php不能跳转页面,nginx 解决首页跳转问题详解
- python麦克劳林级数展开
- Servlet异常处理器
- 一群阿里码农的公益实践:用技术禁毒、打拐
- [开发浏览器实战]关于Firefox火狐浏览器的说明一二(国内版 国际版区别 账号切换 插件-恢复关闭的标签页 插件-tempermonkey油猴)
- 微信小程序for循环
- python的缩进规则具体是什么_python缩进规则叫什么
- Git中的工作区和暂存区
- 庞博 上海交大计算机系,上海交大电子信息与电气工程学院卢策吾团队在人工智能《自然》子刊提出时空概念提取算法...
- MAC安装homebrew慢解决方案
- 解决IDEA打Jar包找不到或无法加载主类问题
热门文章
- python保存图片到指定路径_[Python03] 5分钟学会3种方法给模块添加路径!
- Java进阶:SpringMVC中获取web.xml中的全局参数
- mfc 服务器文件拷贝到本地,mfc服务器客户端间传输文件
- java包含某个字符串_JavaScript判断一个字符串是否包含指定子字符串的方法
- 编程中常见的安全算法
- mysql 8.X主从复制
- jquery 事件冒泡的介绍
- ip查询js获取页面属性
- 论文笔记_S2D.23_2011-ICCV_DTAM: 稠密的实时跟踪和建图
- JDBC 增删改查操作示例