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 ...
随机推荐
- [原]Escape From the iOS Sanbox on Jailbreak Device
just my thinking, 3 ways to escape from sandbox on jailbreak device, to do file copying or execute s ...
- eclipse在Ubuntu 13.04下的安装过程
eclipse在Ubuntu 13.04下的安装过程及问题小记 一.eclipse安装过程 首先确保在安装eclipse之前已经安装好Java虚拟机 1. eclipse官网下载压缩包 下载地址:ht ...
- 讲讲Linq to SQL映射(基础篇)
讲讲Linq to SQL映射(基础篇) 这篇主要讲Linq to SQL基于属性的映射.即映射数据库,映射表,映射列,映射关系,映射存储过程, 映射函数.然而创建这种映射有三种方法,他们分别是OR ...
- 【NET】Winform用户控件的初步封装之编辑控件
编辑控件 public abstract partial class TEditorBase <TEntity, TRepository, TSqlStrConstruct> : User ...
- 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...
- [转]SQL Server中临时表与表变量的区别
[转]http://blog.csdn.net/skyremember/archive/2009/03/05/3960687.aspx 我们在数据库中使用表的时候,经常会遇到两种使用表的方法,分别就是 ...
- Window Service 计划任务
在ASP.NET中创建计划任务,就我个人而言,用过两种方式,一种是用SQL Server创建,把写好的SSIS包导入SQL Server创建的任务中,设置好时间让它去执行.还有一种就是利用window ...
- 分享Mvc3+NInject+EF+LigerUI权限系统
分享Mvc3+NInject+EF+LigerUI权限系统 前段时间时不时看到有园友的分享权限系统,于是本人突发奇想,也想写一个玩玩,就利用晚上时间,陆陆续续花了一周多样子,写了如今这个权限系统, ...
- 对比AutoResetEvent和ManualResetEvent
ManualResetEvent和AutoResetEvent 比较 ManualResetEvent和AutoResetEvent都继承自EventWaitHandler,它们的唯一区别就在于父类 ...
- 为什么MD5不能解密
MD5加密原理是散列算法,也称之为hash算法. 具体的算法很多种,我也不是很懂,写得太专业了,我们只能理解一些简单的.简单才能让人记得住. 举例说明,10除以3余数是1,4除以3的余数也是1,反过来 ...