当前位置：
随时跟进已发布的任务超简单，超方便
手机接任务更便捷
任务编号：287807
HTML5 audio标签不能自动播放制作
所有信用等级
零级（请谨慎交易）
一级（请慎重交易）
二级（可选择交易）
三级（可安心交易）
四级（可持续信赖）
五级（官网推荐交易）
隐藏淘汰稿件
威客缴纳￥保证金，若未按时完成，将向雇主赔付部分任务赏金和保证金。
威客缴纳￥保证金，若证实抄袭剽窃，将向雇主赔付部分任务赏金和保证金。
威客缴纳￥保证金，若任务结束3个月后未提供良好售后服务，将向雇主赔付部分任务赏金和保证金。
￥0交易金额
暂无交易好评
交易安全：
身份真实：
联系可用：
请慎重交易
威客信用：
浙江省-杭州市-西湖区
报价说明：
看到您的任务需求，非常欣喜，正是我们擅长的项目类别。希望看到此条信息对您有所帮助。杭州华舰信息技术有限公司。联系方式，QQ：283****
手机：156*****458
雇主未浏览
￥0交易金额
暂无交易好评
请慎重交易
威客信用：
福建省-厦门市-市辖区
报价说明：
您好，我仔细看了您的需求，关于功能需求想要和您沟通一下。我的ＱＱ：630**** 希望能长期合作！
雇主未浏览
￥2800交易金额
暂无交易好评
请慎重交易
威客信用：
江苏省-南京市-鼓楼区
报价说明：
qq597****,有案例具体详谈。
雇主未浏览
￥0交易金额
暂无交易好评
交易安全：
身份真实：
联系可用：
请慎重交易
威客信用：
福建省-厦门市-集美区
报价说明：
您好，您的需求我们公司可以制作，我们公司前不久还做过一个类似的案例，做得也非常成功。希望您可以多了解一下我们公司的实力。后期可以有机会合作。请加我扣扣：863****
雇主未浏览
￥2.29万交易金额
83.3%交易好评
可选择交易
威客信用：
广东省-深圳市-宝安区
报价说明：
您好，您的需求我已看，我们公司是深圳市金鸡湾科技有限公司，我们拥有最专业的设计团队和设计流程规范会为您的企业提升品质、提高价值。我们的优势就是为您节省成本和提高工作效率.团队人员类型搭配合理，对于设计，式样理解，开发，测试等各开发阶段都按照专业的处理流程和正规的管理方式，具有承接大型项目的能力。我们公司专业致力于：一、网站开发：交友类、论坛社区类、门户站、资讯类、商城类、企业类等各种网站定制开发。二、安卓开发：各类安卓手机和平板应用研发定制。三、iOS开发：iphone、ipad各类软件定制开发。 四、WP开发：wp8各类软件定制开发QQ：205****
联系电话：187*****289
雇主未浏览
￥0交易金额
暂无交易好评
交易安全：
身份真实：
联系可用：
请慎重交易
威客信用：
福建省-厦门市-思明区
报价说明：
您好看了您的需求我们可以完成我们专注于网站建设，软件开发，APP应用，微信开发我们有专业的技术开发人员成功的案例经验 希望能与您沟通合作您可以加我们的联系方式q q ： 3 6 2 8 8
雇主未浏览
后才能发表留言。
猜您需要的人才
猜您感兴趣的任务
精品高手攻略
3710 参与人数
分享可赚钱，赶快告诉您的朋友吧
一品威客诚心推荐
IOS应用类似需求
￥10000.00
￥10000.00
￥30000.00
￥10000.00
热门问答热门百科
让一品11,686,148人才为您分忧解难！
联系客服：在线：8:30-22:00
400-766-8686(免长途费)
您还可以拨打： 或留下联系方式，我们主动联系您
客诉主管 李林祥
客服主管 李喜菊
产品总监 冯梅
联系客服：
在线：8:30-22:00
400-766-8686(免长途费)
您还可以拨打： 或留下联系方式，我们主动联系您
一品官方微信
每日推·十条订单发任务·创意极速
您还可以关注一品新浪微博
维权与监督
固话：400-766-8686
微信：xiang138602
客诉主管 李林祥
客服主管 李喜菊
产品总监 冯梅拿例子说话：HTML 5 Audio标签使用技巧
　作者: 廖煜嵘　编辑:
　　【IT168技术】人类的世界充满着声音，现在随着HTML5的越来越流行，web开发者开始发现，在HTML5的世界中，声音的使用变得更加简单和丰富，只需要使用标签，就可以在页面中嵌入音频了。当然，HTML5中的音频的使用可以很简单，也会有高级的用法，从普通的音频到跟用户交性很强的象游戏的音频都可以支持，在本文中，将带领读者一步步了解HTML5中audio标签的各种用法和使用技巧。　　在页面中增加标签　　首先，来学习标签的最基本用法，就是直接在页面中进行嵌套，如下：&audio src=&audio/sample.mp3& autoplay&&/audio&　　这里通过src制定了要播放的mp3文件，并且设置了autoplay为自动播放。　　也可以使用如下的方法进行播放音频：&&var audio = document.createElement(&audio&);if (audio != null && audio.canPlayType && audio.canPlayType(&audio/mpeg&)){audio.src = &audio/sample.mp3&;audio.play();}　　这里是通过javascript的方法去设置音频的播放，甚至可以象如下代码一样，以音频流的方式进行嵌套：&audio src=&data:audio/mpeg,ID3%02%00%00%00%00%...& autoplay&&/audio&　　对比下上面的三种关于audio标签的声明方式，第一种允许开发者在页面加载的时候就初始化audio控件，第二种方法使用javascript方法，能让开发者更好地通过各类参数去定制audio的属性行为，最后一种方法不大推荐，因为使用的是data-uri的方式将音频嵌套入页面中去，但这能减少对服务端的请求。　　要注意的是，通过javascript来调用audio标签的话，甚至不需要将audio标签添加到DOM树中去，上面的代码会默认产生的播放控件效果如下图：　　尽管在本文中，对HTML 5支持的音频格式不会详细的进行探讨，但读者可以参考以下这篇文章( )，　　这里有详细的介绍，另外一点需要提醒读者注意的是，如果把MP3等音频格式文件放在web 服务器上，一定要记得设置好web 服务器的MIME类型为(&audio/mpeg&),比如下图是在微软的IIS服务器上进行的设置：　　预先加载音频　　在实际的开发中，一种对音频很好的处理方法是对其进行预先加载，这样可以提高页面的加载速度，HTML5的标签提供了preload属性，并有三种值可供选择：　　& &none&: 这个值指的是用户不需要对音频进行预先加载，这样可以减少网络流量，一个典型的情景是如果是一个具备播客功能的语音播客中，每一篇文章其实都有音频，但只有当用户确认打开这些音频收听时，才通过网络进行加载。否则，试想一下，这么多数量的音频同时进行预加载，速度是相当慢的。　　& &metadata&: 这个选项的值将告诉服务端，用户依然不想马上加载音频，但需要预先获得音频的元数据信息(比如文件的大小，时长等)。如果开发者是在设计音频播放器或者需要获得音频的信息而不需要马上播放视频，则可以使用这个选项。　　& &auto&:这个选项告诉服务端，用户需要马上加载音频并进行流式播放，这在比如一些游戏场景等需要实时音频的场景中会用到。　　要注意的是，如果在使用audio标签时中当设置音频的src值的时候，默认采用的设置值是将preload的加载属性设置为auto的，因此如果需要另外设置加载的属性值，需要在设置src前进行设置。　　下面我们通过实验，来观察下三种不同的选项下网络的流量情况,注意的是,要禁止使用本地缓存.这通过IE菜单中使用F12弹出调试工具后,再选择&Always refresh from sever&选项即可。如下图：　　下图是preload=none的情况：　　下图是preload=metadata的情况　　下图是preload=auto的情况　　开发者可能会关心另外一个问题，就是想知道浏览器是什么时候实际去下载音频和开始播放的，这可以通过监听&canplaythrough&事件去获得，当浏览器下载完音频并具备播放条件时，使用如下代码监视：var audio = document.createElement(&audio&);audio.src = &audio/sample.mp3&;audio.addEventListener(&canplaythrough&, function () {alert('The file is loaded and ready to play!');}, false);&　　下面的地址是一个演示的实例：　　Loops循环播放　　下面我们来学习下loops循环播放，当要循环播放一段音频时，可以在audio标签中使用该属性，这将一直让音频播放，除非用户显式调用pause方法，如下代码：&audio src=&audio/sample.mp3& autoplay loop&&/audio&　　下面是一个例子：　　也有另外一种方法，可以在程序中控制循环播放，就是在当某段音频播放结束时，然后等待一些时间，然后再重新播放，如下代码：var audio = document.createElement(&audio&);audio.src = &piano/3C.mp3&;audio.addEventListener('ended', function () {//等待500毫秒 setTimeout(function () { audio.play(); }, <span style="color: #0);}, false);audio.play();　　下面是上面代码运行的例子：　　如果需要在播放时，控制用户停止播放，则可以通过如下代码实现，设置currentTime=0:currentTime=<span style="color: #:var audio = null;audio = document.createElement(&audio&);audio.src = &piano/3C.mp3&;audio.addEventListener('ended', function () {audio.play();}, false);function play() {audio.play();}function restart() {audio.currentTime = <span style="color: #;audio.play();}　　下面的地址是上面代码运行的实际例子：　　多Audio标签&body&&audio src=&audio/Bass.mp3& autoplay loop&&/audio&&audio src=&audio/Drum.mp3& autoplay loop&&/audio&&audio src=&audio/Crunch.mp3& autoplay loop&&/audio&&audio src=&audio/Guitar.mp3& autoplay loop&&/audio&&audio src=&audio/Pizzicato.mp3& autoplay loop&&/audio&&/body&&　　如果用户的场景中，需要同时播放同一个音频文件，这可以通过创建多个audio标签，并且指向同一个文件即可，下面的代码片段讲解了如何使用多个audio标签，代码如下：　　在上面的代码中,是使用了多个audio标签,每个标签都指向了不同的音频文件,这些音频文　　件的长度是相同的,这样这个例子运行起来的效果就是同时播放这些音频,下面的地址是其实　　际运行效果: 　　当然,开发者也可以通过javascript的方法,动态增加多个音频文件,代码如下:AddNote(&<span style="color: #C&);AddNote(&<span style="color: #E&);AddNote(&<span style="color: #G&);function AddNote(name) {var audio = document.createElement(&audio&);audio.src = &piano/& + name + &.mp3&;audio.autoplay = true;}&　　要注意的是,随着应用的复杂,对于能预加载的音频的数量和能够同时播放的音频数量,　　是有一定限制的 ,这其实取决于pc服务器和浏览器,在ie 9下表现还算良好,可以通过下面的　　这个地址进行测试：　　音频播放的异步策略　　由于网络一般来说都存在不稳定的因素，因此要考虑音频播放时的延时等很多因素，特别地，当处理多个文件时，有的文件可能先播放，有的后播放，比如，下图是有3个上文提及的音频在播放时的网络加载情况：　　从上图可以看出，不同的文件的加载时间点是不同的，一个非常常见的策略，是先预先把所有的音频文件都先加载，然后一旦都加载准备完毕，则可以通过循环逐一对它们进行播放，下面是相关的代码：var audios = [];var loading = <span style="color: #;AddNote(&<span style="color: #C&);AddNote(&<span style="color: #E&);AddNote(&<span style="color: #G&);AddNote(&<span style="color: #C&);AddNote(&<span style="color: #E&);AddNote(&<span style="color: #G&);AddNote(&<span style="color: #C&);function AddNote(name) {loading++;var audio = document.createElement(&audio&);audio.loop = true;audio.addEventListener(&canplaythrough&, function () {loading--;if (loading == <span style="color: #) // All files are preloadedStartPlayingAll();}, false);audio.src = &piano/& + name + &.mp3&;audios.push(audio);}function StartPlayingAll() {for (var i = <span style="color: #; i & audios. i++)audios[i].play();}&　　下面这个地址是上面代码的演示：　　　　现在，我们将学到的知识都整合在一起，下面的这个例子，将演奏一段大家都很熟悉的乐曲《两只老虎》(Fr&re Jacques),它将先装载所有的音频文件，并且在浏览器端显示出来其加载进度。运行的地址在这里：　　 。　　使用HTML 5音频优秀网站的例子　　下面介绍几个目前使用html 5音频十分优秀的网站例子：　　1) 　　这个是一个游戏网站，其中在首页就使用了HTML 5 AUDIO标签，并且预先加载需要用的音频素材，以进度条的形式显示。而且该网站的制作团队还在设计将更多的关于HTML5 Audio的操作封装成类库，以方便开发者调用，下面是其中一部分开源的代码，其中充分考虑到网络的加载音频时出现的异常等情况的处理。addAudioChannel:function(b,a,f){var h=document.createElement(&audio&);if(f!=true){this.currAsset=h;this.timeoutId=setTimeout($.proxy(this,&handleAudioTimeout&),e.AUDIO_TIMEOUT);h.addEventListener(&canplaythrough&,$.proxy(this,&handleAudioComplete&),false);h.addEventListener(&error&,$.proxy(this,&handleAudioError&),false)}h.setAttribute(&id&,a);h.setAttribute(&preload&,&auto&);$(&&source&&).attr(&src&,b).appendTo(h);$(&&source&&).attr(&src&,b.split(&.mp3&)[<span style="color: #]+&.ogg&).appendTo(h);document.body.appendChild(h)},handleAudioComplete:function(b){if(LoadedAssets.getAsset(b.target.id)!=true){LoadedAssets.addAsset(b.target.id,true);clearTimeout(this.timeoutId);this.calculatePercentLoaded(true)}},handleAudioError:function(b){trace(&Error Loading Audio:&,b.target.id);LoadedAssets.addAsset(b.target.id,true);clearTimeout(this.timeoutId);this.calculatePercentLoaded(true)},handleAudioTimeout:function(){trace(&Audio Timed Out:&,this.currAsset.id);LoadedAssets.addAsset(this.currAsset.id,true);this.calculatePercentLoaded(true)}　　2 　　这个网站也是一个绝佳的示范了如何使用HTML 5音频的好网站，它允许开发者在这个页面中，自由选择不同的音轨进行合成演奏，还可以调整每个音轨的音量大小，下面是其部分代码：video.addEventListener('canplaythrough', onCanPlayAudio, false);for (var i = <span style="color: #; i & <span style="color: #; i++) {var aud = document.getElementById(&aud& + i); targetVolumes.push(<span style="color: #);aud.volume = <span style="color: #;audioTags.push({&tag&: aud,&ready&: false});aud.addEventListener('canplaythrough', onCanPlayAudio, false);}document.getElementById(&tompkins&).src = MediaHelper.GetVideoUrl(&Firework_3&);for (var i = <span style="color: #; i & audioTracks. i++) {document.getElementById(&aud& + i).src = MediaHelper.GetAudioUrl(audioTracks[i]);}　　3 复杂的音频创作器　　最后介绍的是一款复杂的音频创作器，网站是： ,用户可以在上面进行创作。如下图：　　小结　　在本文中，对HTML 5的AUDIO标签的基本用法作了介绍，并介绍了几个优秀的HTML5 使用音频的网站，希望读者在HTML 5的audio标签中，能起到一定的帮助。
大学生分期购物销量榜
已有条评论
IT168企业级推荐这篇日记的豆列
······移动端常见问题及解决方案
移动端常见问题及解决方案
移动端常见问题及解决方案
转载来源：&&&&
&一 、meta基础知识
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面&&name=&viewport&&content=&width=device-width,initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no&&&
忽略将页面中的数字识别为电话号码 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&name=&format-detection&&content=&telephone=no&&&
忽略Android平台中对邮箱地址的识别 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &&&name=&format-detection&&content=&email=no&&&&
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &!--&ios7.0版本以后，safari上已看不到效果&--&&&name=&apple-mobile-web-app-capable&&content=&yes&&&&
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &!--&可选default、black、black-translucent&-&&&&name=&apple-mobile-web-app-status-bar-style&&content=&black&&&&
& & & & & & & & & & & & & & & & &
二、常见问题
移动端如何定义字体font-family，中文字体使用系统默认即可，英文用Helvetica
移动端字体单位font-size选择px还是rem。对于只需要适配手机设备，使用px即可，对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
移动端touch事件(区分webkit 和 winphone)
当用户手指放在移动设备的屏幕上滑动会触发的touch事件
以下支持webkit：
1、touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
2、 touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
3、touchend——当手指离开屏幕时触发
4、touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
移动端click屏幕产生200-300 ms的延迟响应
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应。
在高清显示屏中的位图被放大，图片会变得模糊？
移动端的视觉稿通常会设计为传统PC的2倍。
前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2；
例如图片宽高为：200px*200px，那么写法如下：.css{width:100height:100background-size:100px 100}其它元素的取&#20540;为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px：.css{font-size:20px}
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉？
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha&#20540;为0，也就是属性&#20540;的最后一位设置为0就可以去除半透明灰色遮罩
部分android系统中元素被点击时产生的边框怎么去掉？
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha&#20540;为0去除部分机器自带的效果
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类还有个办法，不使用a或者input标签，直接用div标签
参考《如何去除android上a标签产生的边框》
1、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉？
2、webkit表单元素的默认外观怎么重置？
3、webkit表单输入框placeholder的颜色&#20540;能改变么？
4、webkit表单输入框placeholder的文字能换行么？
ios可以，android不行~
IE10（winphone8）表单元素默认外观如何重置？
1、禁用 select 默认下拉箭头
::-ms-expand&适用于表单选择控件下拉箭头的修改，有多个属性&#20540;，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
2、禁用 radio 和 checkbox 默认样式
::-ms-check&适用于表单复选框或单选按钮默认图标的修改，同样有多个属性&#20540;，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
3、禁用PC端表单输入框默认清除按钮
当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
4、禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
5、禁止ios和android用户选中文字
参考《如何改变表单元素的外观(for Webkit and IE10)》
打电话发短信的怎么实现？
winphone系统无效
模拟按钮hover效果
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下：
兼容性ios5&#43;、部分android 4&#43;、winphone 8
要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名
屏幕旋转的事件和样式
window.orientation，取&#20540;：正负90表示横屏模式、0和180表现为竖屏模式；
audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
可参考《无法自动播放的audio元素》
摇一摇功能
HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
手机拍照和上传图片
&input type=&file&&的accept 属性
&!-- 选择照片 --&
&input type=file accept=&image/*&&
&!-- 选择视频 --&
&input type=file accept=&video/*&&
使用总结：ios 有拍照、录像、选取本地图片功能，部分android只有选取本地图片功能，winphone不支持
微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整？
Anroid则是复写了layoutinflater 对textview做了统一处理
Ios则是修改了body.style.webkitTextSizeAdjust&#20540;
普通解决方案：android暂无方案
ios使用-webkit-text-size-adjust禁止调整字体大小
最好的解决方案：整个页面用rem或者百分比布局
消除transition闪屏
开启硬件加速，解决页面闪白，保证动画流畅
参考《用CSS开启硬件加速来提高网站性能》
取消input在ios下，输入的时候英文首字母的默认大写
&input autocapitalize=&off& autocorrect=&off& /&
android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
android 2.3 bug
@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉
after和before伪类无法使用动画
border-radius不支持%单位
translate百分比的写法和scale在一起会导致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
三星 Galaxy S4中自带浏览器不支持border-radius缩写
同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
参考《border-radius 移动之伤》
设计高性能CSS3动画的几个要素
尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
利用translate3D开启GPU加速
参考《High Performance Animations》
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案：可用isroll.js，暂无完美方案
《移动端web页面使用position:fixed问题总结》
《使用iScroll.js解决ios4下不支持position:fixed的问题》
如何阻止windows Phone的默认触摸事件
winphone下默认触摸事件事件使用e.preventDefault是无效的
目前解决方法是使用样式来禁用
参考：《Windows phone 8 touch support》
常用的移动端框架
语法与jquery几乎一样，会jquery基本会zepto~，最新版本已经更新到1.16，官网：/
中文(非官网)：/doc/zeptojs_api/
常使用的扩展模块：
浏览器检测：/madrobby/zepto/blob/master/src/detect.js
tap事件：/madrobby/zepto/blob/master/src/touch.js
iscroll.js
解决页面不支持弹性滚动，不支持fixed引起的问题~，实现下拉刷新，滑屏，缩放等功能~，最新版本已经更新到5.0
官网：http://cubiq.org/iscroll-5
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js，&iSlider.js，fullpage.js
我的热门文章
即使是一小步也想与你分享