web音乐播放器
今天闲暇时间，花了2小时，写了个简单音乐播放器。欢迎大家来吐糟
先看下界面截图
大体实现：播放，停止，上一曲，下一曲，循环播放功能。
知识点：1.html 中audio 2.css 位置fixed
其中audio用到的方法：1.play 2.pause ,属性：1.src 2.loop
对于audio不熟悉的移步到http://www.w3school.com.cn/jsref/dom_obj_audio.asp
其中数据部分是在网上找了的保存在listrings.js中
下边关键时刻代码来了
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>audio测试</title>
<meta name="viewport" content="width=device-width" />
<style>
* {
margin: 0;
padding: 0;
} body {
margin-bottom: 50px;
} .fix {
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
background-color: rgba(0, 0, 0, .5);
right: 0;
text-align: center;
font-size:0;
} audio {
display: block;
width: 100%;
}
button{
padding: 3px 2px;
margin:4px 1px;
}
.mp3_list {
padding: 0;
list-style: none;
}
.mp3_list .mp3_title {
padding: 14px 5px;
border-bottom: 1px solid #CCCCCC;
color: #FFFFFF;
background: #1EACEA;
text-align: center;
} .mp3_list li {
position: relative;
padding: 15px 50px 12px 12px;
background: #fff;
color: #4C4C4C;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
border-bottom: 1px solid #F5F5F5;
white-space: nowrap;
cursor: pointer;
} .mp3_list .over,
.mp3_list .active {
color: #00B7EE;
} .mp3_list li span {
position: absolute;
font-size: 12px;
right: 0;
}
</style>
</head> <body>
<div class="fix">
<audio controls autoplay="autoplay">
<source src="http://www.runoob.com/try/demo_source/horse.ogg"></source>
浏览器不支持播放器请更换谷歌或升级浏览器
</audio>
<button id="play">播放</button>
<button id="paused">暂停</button>
<button id="urls">音乐地址</button>
<button id="preurl">上一曲</button>
<button id="nexturl">下一曲</button>
<button id="loop">循环</button>
</div>
<ul class="mp3_list">
</ul>
<script src="listrings.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script>
$(function() {
var listindex = 0,
len = mp3s.length,
audio = $("audio")[0],
source=$("source")[0];
var initlist = function() {
var html = '<div class="mp3_title">音乐列表</div>'
for(i = 0; i < len; i++) {
html += '<li data-id="' + i + '">' + mp3s[i].title + '<span>' + mp3s[i].desp.split("|")[1] + '</span></li>'
}
$(".mp3_list").html(html)
};
var playaudio = function() {
audio.play();
};
//改变音频地址
var changeSrc = function(index) {
$(".mp3_list li").removeClass("active")
$(".mp3_list li").removeClass("over");
audio.src=mp3s[index].songUrl;
$("#paused").trigger("click")
$(".mp3_list li").eq(index).addClass("active")
playaudio()
};
//初始化音乐队列
initlist();
//默认播放第一首
changeSrc(listindex);
//监听结束事件
$("audio").on("ended", function() {
if(++listindex > len) {
listindex = 0;
}
changeSrc(listindex);
});
$(".mp3_list").on("mouseover", "li", function() {
$(this).addClass("over")
});
$(".mp3_list").on("mouseout", "li", function() {
$(this).removeClass("over")
});
$(".mp3_list").on("click", "li", function() {
listindex = $(this).attr("data-id");
changeSrc(listindex)
});
//播放
$("#play").click(playaudio);
$("#paused").click(function() {
audio.pause()
});
$("#loop").click(function() {
var val=audio.loop==true?"循环":"关闭"
$(this)[0].innerText=val
audio.loop = !audio.loop;
});
//当前音乐地址
$("#urls").click(function() {
alert(audio.currentSrc)
});
//上一曲
$("#preurl").click(function() {
if(--listindex < 0) {
listindex = 0;
return
} else {
changeSrc(listindex)
}
});
//下一曲
$("#nexturl").click(function() {
if(++listindex > len) {
listindex = len;
return
} else {
changeSrc(listindex)
}
}); })
</script>
</body> </html>
效果狠狠点击 https://huashuaipeng.github.io/music/audio.html
源码地址：https://github.com/huashuaipeng/music
如果发现不能播放的说明资源不存在了。
推荐一篇文章
HTML5 Audio/Video 标签,属性,方法,事件汇总 https://www.douban.com/note/158621500/
web音乐播放器的更多相关文章
- 基于vue的移动端web音乐播放器
声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...
- web音乐播放器总结
前言 项目暂时告一段落,胸中有股炽热之气望喷涌而出!忍不住吐槽,为什么程序员要加班啊,为什么产品下达deadline,就得把这生死剑架在程序员的脖子上.卧槽,听说程序员在国外是叫工程师的.最近看了很多 ...
- 网页播放音频、视频文件——基于web的html 5的音乐播放器（转载）
文章转载自:开源中国社区 [http://www.oschina.net] 想通过手机客户端(支持 Android.iPhone 和 Windows Phone)访问开源中国:请点这里 HTML5 是 ...
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
- Dewplayer 音乐播放器
Dewplayer 是一款用于 Web 的轻量级 Flash 音乐播放器.提供有多种样式选择,支持播放列表,并可以通过 JavaScript 接口来控制播放器. 注意事项: 该播放器只支持 mp3 格 ...
- 【竞品分析】Android音乐播放器的竞品分析
迄今为止最长的一篇博客,各位看官笑纳~~ 本次分析基于Android平台,选取了几款我体验过的播放器进行比较分析.主要分为两类,一类是大而全的,功能全面,可满足用户管理歌曲.导入导出歌单等多方面需求, ...
- 4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...
- swift3.0 简单直播和简单网络音乐播放器
本项目采用swift3.0所写,适配iOS9.0+,所有界面均采用代码布局. 第一个tab写的是简单直播,传统MVC模式,第二个tab写的是简单网络音乐播放器.传说MVVM模式(至于血统是否纯正我就不 ...
- HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
随机推荐
- Java——接口interface
3.5接口interface ①有时必须从几个类中派生出一个子类,继承它们所有的属性和方法.但是,Java不支持多重继承.有了接口,就可以得到多重继承的效果. ②接口(interface)是抽象方法和 ...
- SpringBoot项目部署初体验【Docker】
前言 一个微服务项目,小到几个模块,大到十几二十几个模块,每个模块都是单独的SpringBoot工程,这么多模块的部署,部署成本真的很高,而且每个服务的部署,都是手动部署,打成war或者jar ?,一 ...
- sql 性能优化 索引碎片
1.索引 简单的说,索引就像书本的目录,目录可以快速找到所在页数,数据库中索引可以帮助快速找到数据,而不用全表扫描,合适的索引可以大大提高数据库查询的效率.(1). 优点大大加快了数据库检索的速度,包 ...
- asp.net MVC遇到的问题
参考:http://blog.csdn.net/chenqiangdage/article/details/48996101 asp.netMVC 如何解决“上下文模型已在数据库创建后发生更改” 问题 ...
- putty字体和颜色修改
来源:https://www.igvita.com/2008/04/14/custom-putty-color-themes/ 网站上有putty的注册表,可以修改putty显示的配色方案. 非常棒!
- J2EE学习篇之--Spring技术详解
今天我们来看一下Spring的相关知识,我们知道Spring也是一个开源的框架,这个框架并不像是Struts一样,这个框架是可以用在Java的所有地方,所以,其实开发Android的时候我们也是可以使 ...
- 排序+模拟+优先队列——cf1248E
其实是个模拟题.. /* 每个人都有一个口渴时间,如果口渴时,其前面没有人在排队,那么其就去排队接水,反之一直等到前面没有人排队 问每个人接完水的时间 每个没轮到的人都在位置上等前面的人接完水,然后他 ...
- curl查看index以及settings
1.查看mapping curl -u elastic:elastic -XGET "127.0.0.1:9200/index_name/_mapping" 2.查看setting ...
- jmeter基本问题
jmetet加压的时候不用图像界面(GUI),直接在命令行加压(命令行生成一个report-命令行参数),不做断言,不加监听器--不然会很卡: 进入就meter命令行: 后置处理器可以从HTML页面拿 ...
- Selenium2Library中select frame关键字对没有name和id的frame或者iframe的处理
elenium2Library中原有的select_frame函数(对应的关键字为select frame)可根据locator选择frame,但是,若某个frame或者iframe没有id,没有na ...