在现在的公司上班需要做一个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. MongoDB:利用官方驱动改装为EF代码风格的MongoDB.Repository框架 一

    本人系新接触MongoDB不久,属于MongoDB的菜鸟范畴.在使用MongoDB的过程中,总结了一些认识,在此总结跟大家分享.欢迎拍砖. 关于MongoDB的内容,在此就不做介绍了,网上有浩如烟海的 ...

  2. 一个Shell小脚本——旋转的斜杠

    话不多说,请从代码中寻找乐趣吧! #!/bin/bash #----中断计数器----# incr= #----旋转的斜杠----# spin="/-\|" echo -en &q ...

  3. iOS LBS相关: 定位和中国特色的位置偏移纠正

    LBS模块,首先当然是定位,获取自己所在的位置.主要用到的就是CLLocationManager,实例一个,然后调用startUpdatingLocation即可.其中可以指定精度CLLocation ...

  4. Google开源的Deep-Learning项目word2vec

    用中文把玩Google开源的Deep-Learning项目word2vec   google最近新开放出word2vec项目,该项目使用deep-learning技术将term表示为向量,由此计算te ...

  5. boost 1.49在vs 2005下编译的方法

    首先下载boost库,网上自己搜索. 然后解压到一个目录:如D:\boost_1_49_0.然打开vs2005的命令提示符,进行D:\boost_1_49_0目录: 1.运行bootstrap.bat ...

  6. PHP之-json转数组,支持多层嵌套json

    function json_to_array($str) { if (is_string($str)) $str = json_decode($str); $arr=array(); foreach( ...

  7. 初识sql server 2000-数据库的连接

    这段时间主要进行学生信息管理系统的实现,所以与数据库打交道是难免的,我也是刚敲过5个数据库例子的小鸟,对数据库的理解还欠佳,不足之处大鸟飞过还请指点. 安装完sql server2000之后,首先要做 ...

  8. Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境(八)

    Libvirt 是用c写的一个管理虚拟机及其资源(如网络.存储和外设等)的工具库,它不仅支持KVM/QEMU,它还支持xen,Vmware,OpenVZ和VirtualBox等其他HyperVisor ...

  9. ajax实现分页

    使用ajax分页原理:第一步:做一个表格 第二步:封装两个方法.第三步:新建个负责显示页面.第四步:做一个纯PHP处理页面处理要显示页的所有数据 首先使用一张数据比较多的数据库中的表格: 首页面加载后 ...

  10. 保护模式特权级别DPL,RPL,CPL 之间的联系和区别

    RPL是段选择子里面的bit 0和bit 1位组合所得的值,但这里要首先搞清楚什么是段选择子,根据Intel 的文件(IA-32 IntelR Architecture Software Develo ...