运用js教你轻松制作html音乐播放器

用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(); 

  }); 

 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript实现带播放列表的音乐播放器实例分享

    代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • js控制网页背景音乐播放与停止的方法

    本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • JavaScript实现音乐自动切换和轮播

    前言:前两天有个同学问我音乐自动切换,并在所有歌曲都播放完成以后实现循环播放的效果.自己折腾了一下做了出来,今天整理桌面的时候突然看见,在拖到回收站的一瞬间想着还是写一篇博客分享一下.实现的方法有很多种,我这里简单的实现. 通过修改video的src(这种应该是最好节省资源的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

  • js仿百度音乐全选操作

    本文实例为大家分享了js全选操作的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{margin:0;padding:0;} ul{list-style:none;} #conten

  • js wmp操作代码小结(音乐连播功能)

    WMP-网页中常见属性和方法 <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" id="wmp" width="0" height="0" style="width:0px;height:0px;"></object> //基本属性

  • js给网页加上背景音乐及选择音效的方法

    本文实例讲述了js给网页加上背景音乐及选择音效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>给网页加上背景音乐,选择音效功能</TITLE> <STYLE> <!--样式单 --> a{font-size:30pt;color:blue;font-family:Vineta BT} a:link{text-decoration:none;} a:hover{text-

  • JS+html5制作简单音乐播放器

    本教程为大家分享了JS音乐播放器的具体代码,供大家参考,具体内容如下 1.HTML <audio> 标签定义声音,比如音乐或其他音频流.其主要属性有src:要播放的音频的 URL,controls:如果出现该属性,则向用户显示控件,比如播放按钮. 几个主要的标签如下: <div> <h4 id="name">李玉刚 - 刚好遇见你</h4> <br> <audio id="audio" src=&qu

  • Vuejs仿网易云音乐实现听歌及搜索功能

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一

  • 运用js教你轻松制作html音乐播放器

    用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc

  • 教你轻松制作Android音乐播放器

    欣赏一下我们清爽的界面吧~ 如果是只用activity来制作这样的东西简直是太小儿科了,此处我们当然用的是service 首先我们先上service的代码: 1.如果我们要访问service的属性和方法,那么在activity肯定是以bindservice的方法实现的,而在service中的onbind方法也是必须要实现的,onbind返回的Ibinder对象在activity的serviceconnection中得到使用. 2.activity获取到Ibinder对象,可以进一步获取服务对象和

  • 教你轻松制作java音乐播放器

    一.音乐播放器的实现原理 Javase的多媒体功能很弱,所以有一个专门处理多媒体的插件叫JMF,JMF提供的模型可大致分为七类 * 数据源(Data source) * 截取设备(Capture Device,包括视频和音频截取设备) * 播放器(Player) * 处理器(Processor) * 数据池(DataSink) * 数据格式(Format) * 管理器(Manager) 而我所做的这个音乐播放器MyMusicPlayer(这是我创建的类名)正是调用了JMF中的Player类来实现

  • Android媒体开发之音乐播放器

    本文实例为大家分享了Android媒体开发之音乐播放器的具体代码,供大家参考,具体内容如下 可以对音乐文件实现播放.暂停.重播和停止功能.退出应用和回到桌面时音乐停止. 主界面: 主界面配置文件mian.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" andro

  • Android版音乐播放器

    音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:播放歌曲.暂停播放歌曲..显示歌曲的总时长.显示歌曲的当前播放时长.调节滑块可以将歌曲调节到任何时间播放.退出音乐播放器. 实现效果如下 实现方式: 第一步:使用Android Studio创建一个Android工程,并且修改activity_main.xml文件 <?xml version="1.0" encoding="utf-8"?> <

  • js制作简单的音乐播放器的示例代码

    一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播放 2 支持图片的旋转 3 支持调整播放的位置,以及调整声音的大小 4 歌词滚动效果 5 每秒显示音乐的播放时间 二 .设计思路: 1.向浏览器中添加背景音乐: 首先应该向网页中添加几首好听的背景音乐.添加音乐有,两种方式可以用一个audo标签,这样应该把音乐的地址存放到一个数组中,第二种方式是,有

  • Android Studio实现音乐播放器的全过程(简单易上手)

    目录 前言 一.项目概述 1.需求分析 2.设计分析 3.资源文件分析 二.开发环境 三.准备工具 四.详细设计 1.搭建主界面布局 2.创建服务类 2.1.服务概述 2.2.服务的创建 2.3.服务的启动方式 2.4.服务的生命周期 3.搭建音乐播放界面布局 4.搭建音乐列表界面布局 5.搭建专辑界面布局 6.导入资源文件 五.项目效果 1.创建模拟器 2.运行演示 六.项目总结 附如何将图片剪成圆形 前言 我们大家平时长时间打代码的时候肯定会感到疲惫和乏味,这个时候一边播放自己喜欢的音乐,一

  • 运用iOS教你轻松制作音乐播放器

    本文实例为大家分享了iOS音乐播放器制作的具体代码,供大家参考,具体内容如下 效果图 目录结构 代码 // // ViewController.m // 播放音乐 // // Created by xubh on 2017/3/24. // Copyright © 2017年 xubh. All rights reserved. // #import "ViewController.h" #import <AVFoundation/AVFoundation.h> @inte

  • 原生JS实现网页手机音乐播放器 歌词同步播放的示例

    整了一下  之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个

随机推荐