html5 -----audio标签
在现在的公司上班需要做一个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标签的更多相关文章
- HTML5 <Audio/>标签Api整理(二)
		
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
 - HTML5 <Audio>标签API整理(三)
		
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
 - HTML5 Audio标签方法和函数API介绍
		
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...
 - CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件
		
CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...
 - html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
		
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
 - html5 audio标签切换播放音乐的方法
		
html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...
 - ios加载html5 audio标签用js无法自动播放
		
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...
 - 论HTML5 Audio 标签歌词同步的实现
		
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
 - HTML5 <Audio>标签API整理(一)
		
简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...
 
随机推荐
- elasticsearch文档-modules
			
elasticsearch文档-modules modules 模块 cluster 原文 基本概念 cluster: 集群,一个集群通常由很多节点(node)组成 node: 节点,比如集群中的每台 ...
 - c语言,递归翻转一个单链表,c实现单链表
			
目的:主要是练习c里面单链表的实现,递归思想复习; #include <stdlib.h> #include <stdio.h> typedef struct _Node{// ...
 - JS获取图片实际宽高
			
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
 - 关于CKEditor.NET的安全性错误
			
关于CKEditor.NET的安全性错误 一直以来在网站上使用FCKEditor.NET文本编辑器 版本应该算是比较早的一个 在使用过程中基本上没有出现什么问题 但是自服务器的IIS(同样都是IIS6 ...
 - FileTable初体验
			
FileTable初体验 阅读导航 启用FILESTREAM设置 更改FILESTRAM设置 启用数据库非事务性访问级别 FileTable 在我接触FileTable之前,存储文件都是存储文件的链接 ...
 - 解析JSON、扩展Fiddler
			
解析JSON.扩展Fiddler 按文章结构,这部分应该给出WCFRest项目示例,我想WinForm示例足够详尽了,况且WCFRest还不需要使用插件AppDomain那一套,于是把最近写的Fidd ...
 - listView 分页加载数据
			
Android应用 开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页 的形式来展示数据,个人觉得这样会有 ...
 - C语言之逻辑运算符
			
一 逻辑运算符: &&:逻辑与,读作并且 表达式左右两边都为真,那么结果才为真 口诀:一假则假 ||:逻辑或,读作或者 表达式左右两边,有一个为真,那么结果就为真 口诀:一真则真 !: ...
 - C语言之算数运算符
			
一 什么是算数运算符 算术运算符: +: 就是把两个数据相加,得到和 -: 就是把两个数据相减,得到差 *: 就是把两个数据相乘,得到积 /: 就是把两个数据相除,得到商 %: 就是把两个数 ...
 - 人机ai五子棋 ——五子棋AI算法之Java实现
			
人机ai五子棋 下载:chess.jar (可直接运行) 源码:https://github.com/xcr1234/chess 其实机器博弈最重要的就是打分,分数也就是权重,把棋子下到分数大的地方, ...