HTML5音频选择播放样式

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

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

看HTML5的代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>音频播放选择</title>
<style type="text/css">
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;
}
</style>
<script src="js/jquery-1.12.2.js" type="text/javascript"></script>
<script src="js/MusicBox.js" type="text/javascript"></script>
<script type="text/javascript">
var mb=null;
$().ready(function(){
mb=new MusicBox();
mb.init();
});
</script>
</head>
<body >
<div>
<audio id="musicBox" controls="true"
onended="mb.nextMusic()"
onloadstart="mb.loadStart()"
onplaying="mb.playing()"
onpause="mb.pausePaly()"
onerror="mb.loadError()"
>
</audio>
<br /> <input id="btnNext" type="button" value="下一首" onclick="javascript:mb.nextMusic()" />
<span id="sn_status"></span><br />
<div style=" margin-top:5px">歌曲列表:</div>
<ul id="ul_musicList" >
</ul>
<div style="width:300px; text-align:right">
播放模式:<select id="slt_playMode">
<option value="1">全部循环</option>
<option value="2">单曲循环</option>
</select>
</div>
</div>

</body>
</html>

完成后是这样的:

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

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

时间: 2024-11-03 05:42:58

HTML5音频选择播放样式的相关文章

HTML5音频播放,歌词同步,及视频播放功能(JPlayer、JWPlayer、VideoJS)

近期项目中用到音频视频播放.所以就写了一个demo: 这个是JPlayer插件的视频播放: 这个是音频播放,歌词同步: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <!--注意:在IIS上配置的时候,需加入mime映射,否则歌词出不来.在IIS列表中找到"MIME类型".进行加入.lrc类型;.mp4类型文件--> <head>     <

HTML5音频播放

1.Audio(音频) HTML5提供了播放音频文件的标准 2.control(控制器) control属性提供添加播放.暂停和音量控件 3.标签 <audio>定义声音 <source>规定多媒体资源,可以是多个 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音频文件视频播放</ti

Html5之高级-5 HTML5音频处理(在H5中播放音频、编程实现音频播放器)

一.在HTML5中播放音频 audio 元素 - audio元素可以实现在HTML页面中嵌入音频内容,该元素的属性可以设置是否自动播放.预加载及循环播放等 - audio元素提供了播放.暂停和音量控件来控制音频 - 使用audio元素提供三种音频格式的文件:MP3.Ogg.Wav - MP3: 采用mpeg音频解码器 - Ogg: 采用ogg音频解码器 - Wav: 采用wav音频解码器 - 语法结构 audio 属性 - audio 元素支持以下属性 - src: 指定播放文件的URL,可通过

选择音频自动播放

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>选择音频自动播放</title></head><body><audio controls autoplay loop> <source src="music/莫斯科没有眼泪(钢琴曲).mp3" typ

HTML5 音频播放 &lt;audio&gt;

HTML5 音频播放 ============================================================================= <audio> 属性与<video>标签相同,用法也相同 ====================================HTML 5 之前的音频播放================================== =====================================音频文

[js开源组件开发]html5标签audio的样式更改

html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下: 作为技术实现,它的原理比较简单,就是把原生的audio隐藏,然后用div来显示播放器的效果,然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取,有时不行,比较坑,所以建议在audio标签上自定义duration属性存

html5 音频和视频(audio And video)

1.音频和视频  Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持三种视频格式: 格式    IE Firefox Opera Chrome Safari Ogg     No 3.5+ 10.5+  5.0+ No MPEG4 9.0+  No           No 5.

克服 iOS HTML5 音频的局限

尽管 HTML5 音频表现出色,但作为一个仍在开发的规范,它仍有很多局限.移动版 Safari 甚至引入了更多的限制.在本文中,您将了解 HTML5 在移动版 Safari 方面的局限性.一些工作示例提供了相应的解决方案和全面的变通方法.通过本文您将了解在移动版 Safari 中使用 audio sprite 的好处,并尝试使用几个独到的解决方案来绕过 iOS 中的 HTML5 局限. 目录[-] 常用的缩略语 HTML5 音频的局限性 格式支持 表 1. HTML5 视频格式支持 清单 1.

关于html5音频如何应用及解决方法?

叙述HTML5音频支持状态糟糕的文章已有很多.事实就是如此,所以我不会在此赘述这一观点.相反,我主要着眼于开发者在特定平台中将会遇到的问题及潜在解决方式. HTML5 audio from codecanyon.ne table 上表总结了网页浏览器当前的市场份额.Internet Explorer依然是主要的桌面浏览器,紧随其后的是Chrome和Firefox.在手机领域中,Safari主导市场,这主要归功于强大的iOS品牌,紧随其后的是Android.因此,我们将照此顺序逐一进行论述. 给刚