在现在的公司上班需要做一个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. 基于ffmpeg的C++播放器1

    基于ffmpeg的C++播放器 (1) 2011年12月份的时候发了这篇博客 http://blog.csdn.net/qq316293804/article/details/7107049 ,博文最 ...

  2. jQuery LigerUI V1.2.2

    jQuery LigerUI V1.2.2 (包括API和全部源码) 发布 前言 这次版本主要对树进行了加载性能上面的优化,并解决了部分兼容性的问题,添加了几个功能点. 欢迎使用反馈. 相关链接 AP ...

  3. 鸟哥的LINUX私房菜基础篇第三版 阅读笔记 二

    Linux档案与目录管理 1.一些比较特殊的目录,需要用力的记下来 .         代表当前层目录 ..        代表上一层目录 -        代表前一个工作目录   (这个好屌!其他的 ...

  4. 电影管理器之XML存储电影信息数据

    电影管理器之XML存储电影信息数据 但凡管理器之类的软件,存储数据是必不可少的.存储数据的话,有几种选择.一是用数据库,把数据存储到数据库里:一是用文本文件,把数据存储到文本文件里:一种是利用XML文 ...

  5. Web缓存解决方案

    缓存是构建于HTTP统一接口之上的最有用功能之一.可以利用缓存减少终端用户感知到的延时,增加可靠性,减少带宽使用和成本,降低服务器负载.缓存无处不在,可以在服务器网络里,内容分发网络(Content ...

  6. [C# 开发技巧]实现属于自己的截图工具

    [C# 开发技巧]实现属于自己的截图工具 一.引言 之前一直都是写一些C#基础知识的内容的,然而有些初学者可能看完了这些基础知识之后,会有这样一个疑惑的——我了解了这些基础知识之后,我想做一些工具怎么 ...

  7. hdu 1498

    每次只能消除一行或一列的相同颜色的气球, 求有多少种气球在k次内不能消除 求出每种气球最少需要多少次消除,就跟hdu 2119消除1用多少次是一样的问题 就是求有这种气球的行和列的最大匹配 #incl ...

  8. as3 Loader程序域

    Loader的 load方法有两个参数 第二个参数是LoaderContext对象 LoaderContext对象里有一个applicationDomain( 程序 域)对象 设置程序域对象可以设置两 ...

  9. .NET基础——运算符

    这一篇我们来讲解C#中的运算符 1. C#中的算术运算符 5个算数运算符:+  -  *  /  %     它们都是二元运算符,*  /  % 的运算优先级相同,并且高于 +  - ,+  - 的运 ...

  10. Java 编译打包命令

    背景 编译 打包 解压 运行 参考 背景 我们有的时候总是要使用将自己写的工程编译成 class 文件,同时打包成 jar,虽然有各种工具可以帮助我们,但是毕竟掌握使用 java 本来的命令去做这些更 ...