html5开发一个音乐播放器,HTML5开发学习(1):使用aduio标签打造音乐播放器
关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待。本文为该系列(html5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注。
html5里有一个新标签audio,该标签用以定义声音,比如音乐或其他音频流。
既然audio标签可以播放音频,那我们可以不再使用flash、wmp等其他任何第三方,轻而易举的使用纯html来打造一个音乐播放器。
例子:
或
下面是小弟用audio做的一个音乐播放器的界面,先睹为快:
audio 有几个属性:
src:string型,所播放音频的 url。
autoplay:bool型,如果是 true,则音频在就绪后马上播放。默认为false。
controls:bool型,如果是 true,则向用户显示控件,比如播放按钮。默认为false。
更多详细属性:">http://www.w3school.com.cn/html5/html5_audio.asp
audio 有几个事件:
onended:当媒介已抵达结尾时运行脚本,也就是当前歌曲播放完了,这里的“媒介”是指audio标签。
onloadstart:当开始加载媒介数据时运行脚本。
onplay:当媒介数据将要开始播放时运行脚本。这里的“媒介数据”是指播放的文件。
onplaying:当媒介数据已开始播放时运行脚本。
onpause:当媒介数据暂停时运行脚本。
onerror:当加载媒介数据出错时运行的脚本。(w3school不是这样解释的)
更多详细事件:http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp#media_events
打造该播放器的完整代码如下:
html
无标题页
body
{ font-size:13px;
font-family:宋体;
}
#ul_musiclist
{
width:300px;
list-style-type:none;
margin:5px 0 3px 0;
padding:0px;
}
#ul_musiclist li
{
padding:5px;
border:solid 1px #eeeeee;
}
var mb=null;
$().ready(function(){
mb=new musicbox();
mb.init();
});
οnended="mb.nextmusic()"
οnlοadstart="mb.loadstart()"
οnplaying="mb.playing()"
οnpause="mb.pausepaly()"
οnerrοr="mb.loaderror()"
>
歌曲列表:
播放模式:
全部循环
单曲循环
musicbox.js
musicbox=function (){
var _this=this;
var media= document.getelementbyid("musicbox");
var musicfiles=[
{name:"犯错",url:""} ,
{name:"天使的翅膀",url:""},
{name:"无名轻音乐",url:"http://audio.ngfiles.com/88000/88260_zanarkan_mastered_piano_ve.mp3"},
{name:"草泥马之歌",url:"错误的资源
{name:"相思风雨中",url:""}
];
//当前正在播放的歌曲的索引
var index=-1;
//当前正在播放的歌曲
var playingfile=null;
//播放模式
var playmode=1;
//下一首
this.nextmusic=function(){
if(playmode=="1"){
index+=1;
}
if(index==musicfiles.length){
index=0;
}
playingfile=musicfiles[index];
media.setattribute("src",playingfile.url);
media.play();
$("#ul_musiclist").children().css({"background-color":"#fff","border":"solid 1px #eeeeee","color":"#000"});
$( $("#ul_musiclist").children()[index]).css({"background-color":"#2c7de2","border":"solid 1px #206ddf","color":"#fff"});
}
//加载
this. loadstart=function(){
$("#sn_status").text("加载中....");
}
//播放
this. playing=function(){
$("#sn_status").text("当前正在播放:"+playingfile.name);
}
//暂停
this. pausepaly=function(){
$("#sn_status").text("暂停:"+playingfile.name);
}
//加载出错
this. loaderror=function(){
$("#sn_status").text("加载“"+playingfile.name+"”失败,可能资源不存在~");
}
//初始化
this.init=function(){
for(var a in musicfiles){
$("#ul_musiclist").append("
"+musicfiles[a].name+"");
}
_this.nextmusic();
$("#slt_playmode").change(function(){
playmode=$("#slt_playmode").val();
});
}
}
如果您能在下面看到播放器并听到背景音乐,那说明您当前使用的浏览器支持html5 。
示例下载(建议使用 google chrome测试)
作者 祥叔
html5开发一个音乐播放器,HTML5开发学习(1):使用aduio标签打造音乐播放器相关推荐
- 自己怎么开发一个软件app、如何开发一个app系统软件?
自己怎么开发一个软件app.如何开发一个app系统软件? 华盛恒辉开发app软件的办法如下: 1.华盛恒辉首先本人明白需求,懂代码,熟习开发流程. 2.华盛恒辉APP开发后期需求理解产品定位. 3. ...
- vc6开发一个抓包软件_开发一个软件多少钱?3种软件开发公司报价
开发一个软件多少钱?现在随着智能手机的发展,各种各样的app大受市场欢迎,同时也方便了大家日常生活,开发一个自己的app软件成为不少传统企业及创业者的首选.但是如何选择靠谱的开发公司呢?同样的app开 ...
- vc6开发一个抓包软件_开发一个软件多少钱?传统app开发与0代码app制作方法对比...
开发一个软件多少钱?app开发难吗?app制作需要哪些流程? app开发很难:按照传统的开发方式需要最少5名以上的技术人员,团队配合花费3个月左右的时间才能搞定,成本20万以上. app开发也很简单: ...
- vc6开发一个抓包软件_开发一个软件要多少钱?app软件开发的费用
很多人咨询app开发相关的问题,大多数人最关心的就是:开发一个软件要多少钱?在本文中,我们将为大家分析这个经典问题:app软件开发的费用是多少? 对于行业中的任何人来说,这都是一个棘手的问题,即使你已 ...
- 如何开发一个直播类 APP 项目开发原理
主播端: 把主播实时录制的视频,经过(采集.美颜处理.编码)推送到服务器 服务器: 处理(转码.录制.截图.鉴黄)后分发给用户播放端 播放器: 获取服务器地址, 进行拉流.解码.渲染 互动系统: 聊天 ...
- html5做一个展示页面,基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- 32驱动_轻松掌握pinctrl子系统驱动开发——一个虚拟pinctrl dev驱动开发
这周主要对pinctrl子系统进行分析,该分析的基本上已经分析完成,唯一没有细说的估计就是gpio与pinctrl之间的关联了.本章即是pinctrl子系统分析的最后一章,本章我们主要实现一个虚拟的p ...
- HTML5实现一个时钟动画,利用html5制作一个时钟动画效果
我们先来看下效果图(不考虑颜色搭配): (学习视频分享:html5视频教程) 我们首先要理解如何去实现这个时钟,暂时不要考虑动画,学着将问题进行拆解,一步一步实现. 首先我们需要画个方形,有个边框,给 ...
- 用html5做一个简单的作品,html5 canvas 简单画板实现代码
canvas简单画板 canvas简单画板 提示:您可以先修改部分代码再运行
最新文章
- nginx 带宽_Nginx优化配置,轻松应对十万并发
- 知识图谱能否成为企业下一代的数据仓库
- JS实现图片的不间断连续滚动
- AI识虫:林业病虫害数据集和数据预处理方法
- Eclipse SVN插件检出Src下面的包变成了文件夹解决
- 32位机器下面各类型的取值范围(sizeof值)
- 浮点数可以直接相加么?_鸭粪屎可以直接做有机肥么?
- STM32通用定时器输出PWM控制舵机 —— 重装载值、比较值、当前值
- SDH与PDH的区别介绍
- Python会赶超Java吗_Python 赶超 Java,JavaScript 稳坐第一 | GitHub
- DockerKubernetes ❀ Kubernetes集群 - DashBoard服务(Web管理)安装部署
- 校园网IPv6免流上网
- 概念模型与关系模型和关系规范化
- macbook air上安装ubuntu双系统
- 延时降低90% | 国内首份《超低延时直播(快直播)白皮书》技术解码
- 阿里云教你掌握API的使用方法
- 安卓升级鸿蒙可行性,华为手机都可以升级鸿蒙系统么?_科技数码通
- 网站压力测试--abtest测试详解abtest
- vue父子组件及非父子组件之间的传值
- 企业微信自建应用(JS-SDK):聊天工具栏分享消息到会话
热门文章
- Python安装超详细教程
- mysql源代码解析经典类——Field类
- Running “flutter pub get“ in xxxx... 解决方案
- OpenFOAM 中的 RTS 机制
- Access denied for user 'mysql用户名'@'主机或IP' (using password: YES)'
- hihoCoder 1135 Magic Box 微软2016校园招聘在线笔试
- 在声音制作中的几个压缩器使用问题,你知道几个呢?
- vue3+ts import引用报错Could not find a declaration file for module ‘three-obj-mtl-loader‘.
- 永磁同步电机矢量控制仿真——如何绘制电机输出的磁链
- 牛客网-java练习