html+css+js实现类似音乐app似的列表播放

最近做了一个类似于音乐app里面列表播放的功能，主要是音频播放和按钮状态的联动：

　　界面如下：

　　如上图所示

　　　　上面有一个播放按钮

　　　　下面有一个播放列表

　　　　上面还有一个歌曲长度的总时长

　　　　上面一个按钮能控制下面所有歌曲的播放和暂停

　　　　下面的也可以控制相对应的歌曲的播放和暂停

　　　　上面的按钮要做到和下面的按钮状态同步

　　　　头部按钮下面是个swiper写的动画效果，效果可以自己定义

　　废话少说：直接上代码吧

html:——————————————————————————————————————————

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>麦唱音乐人</title>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/mcshare.css" />
<script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/sy.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mcshare.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
　　
　　<div id="control">
　　　　<div id="time"></div>
　　　　<img src="img/C_play.png" />
　　</div>
　　
　　<div class="swiper-container">
　　　　<div class="swiper-wrapper">
　　　　　　<div class="swiper-slide">图片1<img src="" /></div>
　　　　　　<div class="swiper-slide">图片2<img src="" /></div>
　　　　　　<div class="swiper-slide">图片3<img src="" /></div>
　　　　</div>
　　</div>
　　
　　<div class="Musician">
　　　　<div class="Head_portrait"><img src="" alt="" /></div>
　　　　<img id="follow" src="img/follow.png" alt="" />
　　　　<div id="Musician_name">东北权志龙</div>
　　　　<img class="Fan_Icon" src="img/fanIcan.png" />
　　　　<div id="FanNum">粉丝数：</div>
　　　　<div id="FanNumNum">1515</div>
　　　　<img class="geographical_position" src="img/geographicalposition.png" alt="" />
　　　　<div id="loction">吉林省</div>
　　　　<div id="Personality_tag">
　　　　　　<span>流行</span>
　　　　　　<span>流行</span>
　　　　　　<span>流行</span>
　　　　　　<span>流行</span>
　　　　　　<span>流行</span>
　　　　　　<span>流行</span>
　　　　　　<span>流行</span>
　　　　　　<span>流行</span>
　　　　</div>
　　　　<div class="Line"></div>
　　　　<div class="left">他的作品（5）</div>
　　</div>
　　
　　<div class="work_list">
　　　　<div>
　　　　　　<audio src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3"></audio>
　　　　　　<span>街角撸串</span>
　　　　　　<img src="img/Collection_H.png" id="Collection" alt="" />
　　　　　　<img src="img/Redplay.png" id="Red_play" />
　　　　</div>
　　　　<div>
　　　　　　<audio src="http://7o51kh.com2.z0.glb.qiniucdn.com/temp/voice/100230002/2017/5/1/7/201705011955438003932.mp3"></audio>
　　　　　　<span>街角撸串</span>
　　　　　　<img src="img/Collection_H.png" id="Collection" />
　　　　　　<img src="img/Redplay.png" id="Red_play" />
　　　　</div>
　　　　<div>
　　　　　　<audio src="http://7o51kh.com2.z0.glb.qiniucdn.com/temp/voice/100230002/2017/5/1/7/201705011955438003932.mp3"></audio>
　　　　　　<span>街角撸串</span>
　　　　　　<img src="img/Collection_H.png" id="Collection" />
　　　　　　<img src="img/Redplay.png" id="Red_play" />
　　　　</div>
　　　　<div>
　　　　　　<audio src="http://7o51kh.com2.z0.glb.qiniucdn.com/temp/voice/100230002/2017/5/1/7/201705011955438003932.mp3"></audio>
　　　　　　<span>街角撸串</span>
　　　　　　<img src="img/Collection_H.png" id="Collection" />
　　　　　　<img src="img/Redplay.png" id="Red_play" />
　　　　</div>
　　　　<div>
　　　　　　<audio src="http://7o51kh.com2.z0.glb.qiniucdn.com/temp/voice/100230002/2017/5/1/7/201705011955438003932.mp3"></audio>
　　　　　　<span>街角撸串</span>
　　　　　　<img src="img/Collection_H.png" id="Collection" />
　　　　　　<img src="img/Redplay.png" id="Red_play" />
　　　　</div>
　　</div>
　　
　　<img id="MC_download" src="img/MC_download.jpg" />
　　
　　<div class="Bottom_navigation">
　　　　<img src="" alt="" />
　　　　<img src="" />
　　　　<img src="" />
　　</div>

</body>

</html>

css:——————————————————————————————————————————

* {
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
background-color: #ededed;
}

#control {

text-align: center;
z-index: 10;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 18.0rem;
background: rgba(0, 0, 0, 0);
margin: auto;
line-height: 18.0rem;
}

#control img {
margin: auto;
width: 4.0rem;
height: 4.0rem;
}

#control #time {
position: absolute;
left: 46.5%;
top: 58%;
line-height: 0;
/*width: 100px;
height: 30px;*/
}

#audio {
position: absolute;
left: 0;
top: 0;
}

.swiper-container {
width: 100%;
height: 18.0rem;
text-align: center;
line-height: 15.0rem;
font-size: 2.0rem;
/* background-color: beige;*/
}

.swiper-wrapper {
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
;
}
.swiper-wrapper img{
width: 100%;

}
.Musician {
width: 100%;
height: 11.75rem;
background-color: #ffffff;
position: relative;
}

.Head_portrait {
position: absolute;
top: -0.9rem;
left: 2.35rem;
width: 6.5rem;
height: 6.5rem;
background-color: #ccc;
border-radius: 10px;
border: 2px solid #e76540;
z-index: 10;
}
#Head_portrait img{
width: 100%;
}

#follow {
position: absolute;
left: 3.1rem;
top: 6.5rem;
width: 4.95rem;
height: 1.75rem;
}

#Musician_name {
position: absolute;
left: 11.1rem;
top: 1.35rem;
font-size: 1.5rem;
color: #313a41;
}

.Fan_Icon {
position: absolute;
left: 11.2rem;
top: 3.6rem;
width: 0.85rem;
height: 0.7rem;
}

#FanNum {
position: absolute;
left: 12.5rem;
top: 3.5rem;
font-size: 0.7rem;
color: #9d9d9d;
}

#FanNumNum {
position: absolute;
left: 15.0rem;
top: 3.5rem;
font-size: 0.8rem;
/*font-weight: bold;*/
color: #9d9d9d;
}

.geographical_position {
position: absolute;
left: 11.25rem;
top: 4.7rem;
width: 0.65rem;
height: 0.85rem;
}

#loction {
position: absolute;
left: 12.5rem;
top: 4.7rem;
font-size: 0.7rem;
color: #9d9d9d;
}

#Personality_tag {
position: absolute;
left: 11.15rem;
top: 6.65rem;
width: 17.6rem;
}

#Personality_tag span {
display: inline-block;
width: 2.4rem;
height: 0.75rem;
border: 1px solid #cccccc;
border-radius: 5px;
text-align: center;
line-height: 0.8rem;
font-size: 0.6rem;
color: #949494;
}

.Line {
position: absolute;
left: 0;
top: 9.8rem;
width: 100%;
border-bottom: 1px solid #ededed;
}

.left {
position: absolute;
left: 0.85rem;
top: 10.25rem;
font-size: 0.7rem;
color: #8b8b8b;
}

.work_list {
width: 100%;
/* height: 15rem;*/
/*background-color: blue;*/
}

.work_list div {
position: relative;
margin-top: 0.4rem;
margin-left: 0.75rem;
width: 30.4rem;
height: 4.25rem;
border-radius: 3px;
background-color: #ffffff;
}

.work_list div span {
position: absolute;
left: 1.4rem;
top: 1.65rem;
color: #4e4e4e;
font-size: 1.1rem;
}

#Collection {
position: absolute;
left: 25.2rem;
top: 1.55rem;
width: 1.5rem;
height: 1.4rem;
}

#Red_play {
position: absolute;
left: 27.5rem;
top: 1.5rem;
width: 1.45rem;
height: 1.55rem;
}

#MC_download {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 3.4rem;
}

.Bottom_navigation {
width: 100%;
height: 20rem;
margin-top: 0.4rem;
margin-bottom:3.4rem;
background-color: saddlebrown;
}
.Bottom_navigation img{
width: 100%;
}

js：——————————————————————————————————————————

$(function() {
//swiper
var mySwiper = new Swiper('.swiper-container', {
effect : 'fade',
fade: {
crossFade: true,
},
loop: true,
autoplay: 2000,
speed: 800,
});

function xaizai() {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if(isiOS == "true") {
window.location.href = "此链接不做公开";
} else {
window.location.href = "此链接不做公开";
}
}
$("#MC_download").on("click", function() {
xaizai();
})
$("#follow").on("click", function() {
xaizai();
})
$("div #Collection").on("click", function() {
xaizai();
})
//获取所有的audio标签
var audios = document.getElementsByTagName('audio');
//获取上面总控制按钮
var controul = document.querySelector("#control img");
//获取下面所有的控制按钮
var imgs = document.querySelectorAll("#Red_play");
//新建一个数组
var arr = [];
//给上面总按钮添加的一个属性bol
var bol2 = true;
//获取播放时间的div获取
var time = document.getElementById("time");
//记录当前播放的第几首的num
var num = null;
//获取底部banner所有的img标签
// var banerImgs = document.querySelector(".Bottom_navigation img");

$(".Bottom_navigation img").each(function(index){
$(this).on("click",function(){
xaizai();
})
})

//上面总按钮控制播放js
$("#control img").on("click", function() {
// alert(num)
if(bol2 == true) {
if(num == null) {
num = 0;
}
$("#control img").attr("src", "img/C_stop.png");
imgs[num].src = "img/redStop.png";
bol2 = !bol2;
audios[num].play();
//展示歌曲总时长
m = Math.floor(audios[num].duration / 60),
s = Math.floor(audios[num].duration % 60);

time.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
//监听当前歌曲播放是否完成
audios[num].onended = function() {
imgs[num].src = "img/Redplay.png";
$("#control img").attr("src", "img/C_play.png");
bol2 = true;
imgs[num].bol = false;
// this.bol2 = true;
}
imgs[num].bol = false;
} else if(bol2 == false) {
$("#control img").attr("src", "img/C_play.png");
imgs[num].src = "img/Redplay.png";
bol2 = !bol2;
audios[num].pause();
m = Math.floor(audios[num].duration / 60),
s = Math.floor(audios[num].duration % 60);
console.log(m);
console.log(s);
time.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
}

})
//下面播放按钮控制音频播放以及播放状态的js
for(var i = 0; i < imgs.length; i++) {
imgs[i].bol = true;
imgs[i].index = i
imgs[i].onclick = function() {
// alert(this.bol)
// this.bol = true;
num = this.index;

for(var j = 0; j < imgs.length; j++) {
// imgs[j].bol2 = true;
imgs[j].src = "img/Redplay.png";
audios[j].pause();
}
if(this.bol) {
num = this.index;
audios[this.index].play();
//监听当前音乐播放完
audios[this.index].onended = function() {
imgs[num].src = "img/Redplay.png";
this.bol = true;
$("#control img").attr("src", "img/C_play.png");
}
imgs[this.index].src = "img/redStop.png";
controul.src = "img/C_stop.png";
//初始化所有属性全设置成true
for(var p = 0; p < imgs.length; p++) {
imgs[p].bol = true;
}
//设置当前播放的属性
this.bol = false;
//给最上面开关设置属性属性同步
bol = this.bol;

//获取播放的总时间做展示
m = Math.floor(audios[this.index].duration / 60),
s = Math.floor(audios[this.index].duration % 60);
time.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
} else if(this.bol == false) {
// alert(222)
audios[this.index].pause();
imgs[this.index].src = "img/Redplay.png";
controul.src = "img/C_play.png";

//初始化所有属性全设置成true
for(var p = 0; p < imgs.length; p++) {
imgs[p].bol = true;
}
this.bol = true;
//属性同步
bol = this.bol;
//获取播放的总时间做展示
m = Math.floor(audios[this.index].duration / 60),
s = Math.floor(audios[this.index].duration % 60);
time.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
}

}
}
})

原理就是：一个音频对应一个audio标签，然后去用js控制按钮的联动；当然你也可以用一个audio标签，每次换歌曲的时候重新赋给它新的路径；

html+css+js实现类似音乐app似的列表播放的更多相关文章

html+css+js+Hbuilder开发一款安卓APP，根本不用学Android开发！
我们知道,要做一款安卓APP,咱们得先学安卓开发语言,例如java,前端后端.那么没有这些开发语言基础,咱们怎么做呢?其实现在有比较好的开发方案就是做webAPP,咱们可以用web前端知识构建安卓客户 ...
Spring MVC程序中得到静态资源文件css,js,图片
转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...
Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结作者:轻舞肥羊日期:2012-11-26 http://www.blogjava.net/fi ...
开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面
NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术来呈现用户界面(类似Electron). ...
【音乐App】—— Vue-music 项目学习笔记：项目准备
前言: 学习慕课网Vue高级实战课程后,在实践中总结一些这个项目带给自己的收获,希望可以再次巩固关于Vue开发的知识.这一篇主要梳理:项目概况.项目准备.页面骨架搭建.项目github地址:https ...
前端三件套 HTML+CSS+JS基础知识内容笔记
HTML基础目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签文本和超链接标签标题标签段落标签换行标签水平标签 ...
去它的h5，我还是用js写原生跨平台app吧
智能手机功能越来越强大,已经在逐渐替代电脑的作用.百度.腾讯.阿里的移动端日活数也在逐步的赶上甚至超越电脑端用户.叫喊着“mobile first”的公司越来越多,App开发者应运而生,且队伍日趋庞大 ...
12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面
上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...
App.js – 用于移动 Web App 开发的 JS 界面库
App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

随机推荐

mysql Out of range value adjusted for column导致Warning(1265)Data truncated for column 'column_name' at row 1
今天下午,我们的一个开发来找我,说线上有个环境报了"Warning(1265)Data truncated for column 'column_name' at row 1",定 ...
[c/c++] programming之路（7）、数据类型转换、偷钱小程序、进制转换
一.数据类型转换 #include<stdio.h> //某些场合,必须进行数据类型转换,以匹配调用 void main0(){ printf();//printf不管你是什么类型,解析失 ...
【python041--构造方法：构造和析造】
一.魔法方法 1.魔法方法总是被双下划线包围,例如:__init__ 2.为什么在类实例化的时候,有时候需要构造__init__,有时候不需要呢举例说明: #定义一个矩形的类,需要长和宽两个参数,计 ...
我写的RunTime函数之一，为类的某个属性赋值以及方法交换
1,为属性赋值 #import <UIKit/UIKit.h> @interface UIViewController (RunTime) - (BOOL)setPropertyVal ...
topcoder srm 450 div1
problem1 link 用$f[i][0],f[i][1]$表示从$i$位置开始Alice是先手是否可以胜利,是后手是否可以胜利. problem2link 每次钱数够$price$时可以选择使得 ...
Spring 学习——Spring IOC概念
Spring IOC 接口及面向接口编程接口定义及理解:接口是一个类的抽象声明,用于由内部操作分离出外部沟通的方式,使其内部进行修改而不影响其外部连接沟通的一种交互方式.不对外公开逻辑处理,只是返 ...
Linux下调整ext3分区大小【转】
本文转载自:https://blog.csdn.net/cruise_h/article/details/22403529 本文讨论如何再不丢失数据的情况下调整已有ext3分区的大小,包括: 压缩已有 ...
彻底地/ 终于地, 解决关于apache 权限的问题了:: 修改 DocumentRoot后的 403错误: have no permission to access / on this server
目录的权限都应该设置为 drwxr_xr_x, 即755, 而html下的文件的权限设置为; 644 即可! -x 只有目标文件对某些用户是可执行的或该目标文件是目录时才追加x 属性. -w权限, ...
Why database migrations?
https://flywaydb.org/getstarted/why First, let's start from the beginning and assume we have a proje ...
P4091 [HEOI2016/TJOI2016]求和
留待警戒 FFT的时候长度要写的和函数里一样啊XD 瞎扯这是个第二类斯特林数的理性愉悦颓柿子题目颓柿子真的是让我hi到不行啦(才没有) 前置芝士一个公式 \[ \sum_{i=0}^n t^i ...

html+css+js实现类似音乐app似的列表播放

html+css+js实现类似音乐app似的列表播放的更多相关文章

随机推荐

热门专题