一切自知，一切心知，月有盈缺，潮有涨落，浮浮沉沉方为太平。
当前位置： &
简单几步在你的H5页面上添加音乐播放
看了很多场景应用，或者叫LIVE APP，作品的右上角总是会有一个音频按钮，会播放音乐，想不想快速的在自己的WAP页面上快速的加上这个功能呢，看下我怎么做的吧。
只需简单几步哦：
加入HTML代码，因为是绑定在每一页的右上方（或者其他位置），定位用了fixed，所以在页面底部/body之前加上html代码
&span id="musicControl"&
&a id="mc_play" class="stop" onclick="play_music();"&
&audio id="musicfx" loop="loop" autoplay="autoplay"&
&source src="./src/audio/audio.mp3" type="audio/mpeg"&
source 标签里面对应的音频链接换为自己的音频连接哦。
网页头部加入CSS代码
/* music */
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(-360deg);}
@-webkit-keyframes rotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
#musicControl { position:right:10top:20margin-top:0;display:inline-z-index:}
#musicControl a { display:inline-width:25height:25overflow:background:url('./src/images/mcbg.png') no-background-size:100%;}
#musicControl a audio{width:100%;height:56}
#musicControl a.stop { background-position:}
#musicControl a.on { background-position:0px 1-webkit-animation: reverseRotataZ 1.2}
#music_play_filter{width:100%;height:100%;overflow:position:top:0;left:0;z-index:;}
这里添加了1个反转图标的H5动画规则，musicControl a&里的背景图在这里下载哦，
添加对应的JS控制方法
function play_music(){
if ($('#mc_play').hasClass('on')){
$('#mc_play audio').get(0).pause();
$('#mc_play').attr('class','stop');
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
$('#music_play_filter').hide();
event.stopPropagation(); //阻止冒泡
function just_play(id){
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
if (typeof(id)!='undefined'){
$('#music_play_filter').hide();
event.stopPropagation(); //阻止冒泡
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
var play_filter=document.getElementById('music_play_filter');
play_filter.addEventListener('click', function(){
just_play(1);
play_filter.addEventListener('touchstart', function(){
just_play(1);
play_filter.addEventListener('touchend', function(){
just_play(1);
play_filter.addEventListener('touchmove', function(){
just_play(1);
play_filter.addEventListener('mousedown', function(){
just_play(1);
play_filter.addEventListener('mouseup', function(){
just_play(1);
play_filter.addEventListener('mousemove',function(){
just_play(1);
window.onload=function(){
if (!is_weixn()){
just_play();
这里还加入了一个方法判断是否是在微信内打开，如果不是在微信内就自动播放，在微信内部需要点击按钮才变换为播放状态。
简单三步已经把这个功能实现了哦。是不是很方便呢。
demo演示：/demo/audioplay/
我的淘宝店铺
长期提供技术咨询，技术支持服务
接中、小项目外包聚合阅读：关于 “H5页面” 的最新资讯内容
深圳云美网络科技有限公司专注移动互联网技术开发和运营推广。致力于为企业提供最前沿的移动互联网思维。公司总部设立深圳，并于北京、广州设有分公司。团队人数超过130人，包含推广部、技术开发部、销售部、创意策划部、媒体购买部、线下活动部、微电影拍摄部。技术开发核心团队具..
这不仅是一篇经验，更是今年H5行业爆款H5刷屏秘密的浓缩精华，希望这份年终总结能给你更多权威的H5设计认知。虽然我们都以刷屏为目标，但是一味瞎搞是..
近来二次元画风席卷文娱行业。9月2日，手游《阴阳师》上线，45天内下载量突破千万；11月11日，电影《航海王之黄金城》上映，票房现已破亿；11月24日，..
如今由于微信大热，很多公司通过微信进行宣传活动、树立品牌在寻常不过了。当然你也会发现，一个好玩有趣的H5页面在微信朋友圈里获得的用户关注度会远超过那些普通的独立的APP数量。从用户应用角度来讲，H5最重要的一个特点就是，它是开发一个基于平台的页面或者应用，这样就打破A..
本文从类型和内容两方面总结出最全的H5分类，希望能够对大家有所启发！..
虽然没有剑拔弩张，但HTML 5与Flash之间的缠斗细数已有有十年之久，2014年W3C联盟历时八年修订，正式发布HTML 5标准，想必那时Adobe就应该知道，Flash命不久矣。如今，这场互联网决战中的较量正接近尾声。随着中国最大的直播平台虎牙直播宣布全面采用HTML5直播技术，Flash在全球仅..
近几日，领导忽然要求做一个关于“双11”相关的微信电子邀请函，大致提了一下H5页面的核心制作理念与观点，要求能够在微信朋友圈中营销传播，原本兴致..
并不是每个app都能像天猫、京东那样在双十一玩那么大，玩得花样百出。如果作为没有什么名气的小app的运营，抽奖H5活动还是一个比较不错的选择的。为什..
前两天，i H5的设计定制群出现以下对话：——“G20峰会主会场征集(H5)方案，9月6、7、8三天会在今日头条上全国或全省推送!一般设计个H5，怎么个酬劳?..
9月发布的Chrome 53起，谷歌浏览器将屏蔽90%的Flash内容，年底把HTML5作为网页内容标准。..
微信扫一扫HTML标签语义化（含H5）
作者：佚名
字体：[ ] 来源：互联网 时间：04-08 14:31:59
本篇文章小编为大家介绍HTML标签语义化（含H5） ，有需要的朋友可以参考一下
HTML是提供网页文档内容的上下文结构和含义；HTML本身是没有表现的，我们看到的例如&H3&是粗体，字号为2em；&strong&的加粗，不要认为这些是html的表现，这是html的默认样式在起作用，所以我们要知道html和页面的表现是没有关系的，表现是CSS的事。html在页面中的作用是结构、含义，说白了就是划分内容，这里放什么，我们放的是什么。
一个页面比作房子，那HTML就是钢筋混凝土的墙，房盖房梁一样的架子；而CSS就是装饰材料，地板油漆一类的东西。好的页面结构就是在没有CSS装饰的情况下，页面结构依然清晰明了，房屋依然可现。而人们常说的DIV+CSS，只是通俗的说法，并不是通篇的DIV，记住：DIV不是神！
HTML是一种对文本内容和意义（即语义）的补充说法。它会告诉我们说：&这行是一个标题，这几行组成一个段落，这是一个项目列表，那是一个链接。&而不是来告诉我们：&这些字是蓝色的，那些又是红色的，这部分内容靠右，这几个是斜体。&这些是CSS的工作。总之：HTML告诉我们一块内容是什么（或其意义），而不是它长什么样子。
代码如下:&!--未语义化--&&div id="header"&&div class="H3"&前砖攻城师&/div&&div class="h2"&搭积木也要玩艺术&/div&&/div&&!--语义化之后--&&div id="header"&&H3&前砖攻城师&/H3&&h2&搭积木也要玩艺术&/h2&&/div&
语义化的好处？
去掉样式能让页面结构呈现清晰
屏幕阅读器会按标记&读&你的网页
便于团队开发和维护
附:HTML5新增元素
与html4对照
标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容
HTML5:&article&&/article&HTML4:&div&&/div&
标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5:&&section&&/section&HTML4:&&div&&/div&
标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:&aside&Aside 的内容是独立的内容，但应与文档内容相关。&/aside&HTML4:&div&Aside 的内容是独立的内容，但应与文档内容相关。&/div&
标签定义 section 或 document 的页眉。
HTML5:&&header&&/header&HTML4:&&div&&/div&
标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5:&&footer&&/footer&HTML4:&&div&&/div&
标签用于对网页或区段（section）的标题进行组合。
HTML5:&&hgroup&&/hgroup&HTML4:&&div&&/div&
标签定义导航链接的部分
HTML5:&&nav&&/nav&HTML4:&ul&&/ul&
标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:&canvas id=&myCanvas& width=&200& height=&200&&&/canvas&HTML4:&object data=&inc/hdr.svg& type=&image/svg+xml& width=&200& height=&200&&&/object&
标签定义视频，比如电影片段或其他视频流。
HTML5:&&video src=&movie.ogg& controls=&controls&&您的浏览器不支持 video 标签。&/video&HTML4:&object type=&video/ogg& data=&movie.ogv&&&param name=&src& value=&movie.ogv&&&/object&
标签定义声音，比如音乐或其他音频流。
HTML5:&audio src=&someaudio.wav&&您的浏览器不支持 audio 标签。&/audio&HTML4:&object type=&application/ogg& data=&someaudio.wav&&&param name=&src& value=&someaudio.wav&&&/object&
标签定义嵌入的内容，比如插件。
HTML5:&&embed src=&horse.wav& /&HTML4:&&object data=&flash.swf& &type=&application/x-shockwave-flash&&&/object&
标签为媒介元素（比如 &video& 和 &audio&）定义媒介资源。
HTML5:&&source&HTML4:&&param&
&datalist&
标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5:&&datalist&&/datalist&HTML4:&none
标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 &legend& 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5:&&details&&/details&HTML4:&&dl style=&display:hidden&&&/dl&
标签包含 details 元素的标题，&details& 元素用于描述有关文档或文档片段的详细信息。&summary& 元素应该是 &details& 元素的第一个子元素。
HTML5:&&details&&summary&HTML 5&/summary&This document teaches you everything you have to learn about HTML 5.&/details&HTML4:&none
标签用于对元素进行组合。使用 &figcaption& 元素为元素组添加标题。
HTML5:&&figure&&figcaption&PRC&/figcaption&&p&The People's Republic of China was born in 1949...&/p&&/figure&HTML4:&&dl&&H3&PRC&/H3&&p&The People's Republic of China was born in 1949...&/p&&/dl&
&figcaption&
标签定义 figure 元素的标题。&figcaption& 元素应该被置于 &figure& 元素的第一个或最后一个子元素的位置。
HTML5:&&figure&&figcaption&PRC&/figcaption&&/figure&HTML4:&none
主要用来在视觉上向用户呈现那些需要突出的文字。&mark&标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5:&&mark&&/mark&HTML4:&&span&&/span
标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5:&&meter&&/meter&HTML4:&none
标签定义不同类型的输出，比如脚本的输出。
HTML5:&&output&&/output&HTML4:&&span&&/span&
&progress&
标签运行中的进程。可以使用 &progress& 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5:&&progress&&/progress&HTML4:&none
标签定义日期或时间，或者两者。
HTML5:&&time&&/time&HTML4:&&span&&/span&
标签用于对网页或区段（section）的标题进行组合
HTML5:&&keygen&HTML4:&none
标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5:&&command onclick=cut()& label=&cut&&HTML4:&none
大家感兴趣的内容
12345678910
最近更新的内容推荐这篇日记的豆列
······