在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止。后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使用audio标签

例如:<audio src="/h5/a/bg.mp3" autoplay loop data-src="/h5/a/bg.mp3" id="musicall"></audio>

这样不太好,页面预解析的时候就可以播放了,最后用JS在页面加载完成后添加

window.onload = function(){
var music = document.getElementById('u-globalAudio');
var audio = document.createElement("audio");
var music_img = document.getElementsByTagName('img')[0];
audio.setAttribute('src', '/h5/a/bg.mp3');
audio.setAttribute('data-src', '/h5/a/bg.mp3');
audio.setAttribute('loop','');
audio.setAttribute('autoplay','');
audio.setAttribute('id','music1');
music.appendChild(audio);
var onOFF = true;
//var audio = document.getElementById('music1');
music_img.onclick = function(){
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.<span style="font-family: Arial, Helvetica, sans-serif;">在播放器暂停时返回true</span>

if(!audio.paused)
{
audio.pause();// 这个就是暂停//audio.play();// 这个就是播放
onOFF = false;
}else{
audio.play();
onOFF = true;
}
}
}
//setTimeout("document.getElementById('musicall').src='/h5/a/bg.mp3'; ",3000);

}

html5 -----audio标签的更多相关文章

  1. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  2. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  3. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  4. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  5. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  6. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  7. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  8. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  9. HTML5 <Audio>标签API整理(一)

    简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...

随机推荐

  1. SublimeText编辑器替代notepad++了

    可以考虑使用SublimeText编辑器替代notepad++了   内容目录: 插件安装配置 配置打包下载 大概是去年吧,这款编辑器神一般的出现在我面前,经过我小心翼翼的试用后发现并不是那么太顺手, ...

  2. MSSQL数据库迁移到Oracle

    MSSQL数据库迁移到Oracle 最近要把一个MSSQL数据库迁移到Oracle上面,打算借助PowerDesigner这个软件来实现;今天简单研究一下这个软件的运用;把一步简单的操作步骤记录下来: ...

  3. IOS学习之路二十二(UIAlertView获得文本框内容及添加北京图片)

    今天写项目要用到警告框带输入框的,于是就自己做了个小demo. 效果图大体如下: 下面简单介绍一下UIAlertView alertViewStyle属性有以下三种选项:  UIAlertViewSt ...

  4. jquery选择器之基本过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

  5. 为Exchange 2007 SCC 启用 SCR 副本-供需要的人使用!

    SCC 已经部署完整,接下来我们必须防范本地站点如果出现了完全的损坏怎么办? Exchange 2007 SP1 提供了另外一种高可用的方式,就是基于我们的SCR 模型,SCR 模型是基于SCC 本地 ...

  6. [转载]expect spawn、linux expect 用法小记

    原文地址:expect spawn.linux expect 用法小记作者:悟世 使用expect实现自动登录的脚本,网上有很多,可是都没有一个明白的说明,初学者一般都是照抄.收藏.可是为什么要这么写 ...

  7. [置顶] ZK(The leading enterprise Ajax framework)入门指南

    1. Why ZK JavaEE领域从来就不缺少Framework尤其是Web Framework,光是比较流行的就有:SpringMVC.Struts2.JSF系列…… 其它不怎么流行的.小众的.非 ...

  8. MySQL索引方法

    MySQL目前主要有以下几种索引方法:B-Tree,Hash,R-Tree. 一.B-Tree B-Tree是最常见的索引类型,所有值(被索引的列)都是排过序的,每个叶节点到跟节点距离相等.所以B-T ...

  9. C++虚函数实现多态原理(转载)

    一.前言 C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型别的指针指向其子类的实例,然后通过父类的指针调用实际子类的成员函数.这种技术可以让父类的指针有"多种形态 ...

  10. iOS开发-OC语言 (五)字典

    字典 主要知识点: 1.NSDictionary 类 2.NSMutableDictionary 类 3.了解NSMutableDictionary 与 NSDictionary 的继承关系 4.补充 ...