html 音频 好看的样式,HTML5音频选择播放样式

本文记录了使用HTML5实现音频播放样式的细节,包括如何利用JS(如jquery-1.12.2.js和MusicBox.js)进行控制。在页面中,创建了一个歌曲列表,并设置了播放模式。当音乐播放结束、开始、暂停或出现错误时,会触发不同的JS事件。MusicBox.js文件包含了自定义的音乐播放逻辑,帮助作者加深了对HTML5音频播放的理解。
摘要由CSDN通过智能技术生成

今天记录HTML5的音频播放样式,首先HTML5音频样式需要用到JS,这里我用了两种,这个代码之前老师也讲过,但是我这里记录的是自己的代码。

95af5d47eee64abef861eaf55e8a932d.png

首先jquery-1.12.2.js是配置文件,但是MusicBox.js是自己手动添加的一个JS文件。

看HTML5的代码:

音频播放选择

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()"

>

歌曲列表:

播放模式:

全部循环

单曲循环

完成后是这样的:

13a033b624dda3e37ffccad4ee8800f4.png

MusicBox.js文件的代码为了方便自己加深印象截取部分的代码图:

835ebfa8d00438cb040c90da8b82c245.png

好了,今天的代码笔记就暂时这样了!

原文:http://www.cnblogs.com/kulowreidyql/p/5733963.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值