html5 背景音乐 js控制播放 暂停
<html>
<head>
<title>
测试页面
</title>
<script src="jquery.min.js"></script><!--没有试用jquery,没有用,我用的是getElementById-->
</head>
<body>
<script type="text/javascript"></script>
<audio src="123.mp3" controls="controls" id="music1" autoplay>
</audio>
<input type="button" value="咳咳" onclick="bofang()">
<script>
function bofang(){
var audio = document.getElementById('music1');
if(audio!==null){//判断是否获得
if(audio.paused){//获得播放状态,这个属性应该是是否是暂停状态,如果是就播放,如果不是暂停就暂停
audio.play();
}else{
audio.pause();
}
}
}
</script>
</body>
</html>
audio标签的属性解释
| autoplay属性名 | autoplay值 | 如果出现该属性,则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
| loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
| preload | preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
html5 背景音乐 js控制播放 暂停的更多相关文章
- duilib 增加gif控件(基于gdi+,可控制播放暂停,自动设置大小)
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42502081 因为项目需要我需要给duilib增加一个gif控件,目前已 ...
- 用JS控制video暂停再播放
模块就是用来进行封装,进行高内聚 低耦合的功能.其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须要引用它,ng2 中叫import 导入.那么我们看模块是否有 ...
- 31.JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...
- js控制html5 audio的暂停、播放、停止
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- HTML5背景音乐的暂停与播放
HTML代码: <audio id="myaudio" loop="loop" preload="auto" autoplay ...
- js控制html5 【video】标签中视频的播放和停止
需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...
- HTML5 - 使用JavaScript控制<audio>音频的播放
有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效. 1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...
- HTML5使用JavaScript控制<audio>音频的播放
1.播放音乐最简单的样例 <audio controls> <source src="horse.mp3" type="audio/mpeg" ...
- Cocos2d-x中背景音乐播放暂停与继续
背景音乐播放暂停与继续似乎我们很少使用,事实上也正是如此,背景音乐播放暂停与继续实例代码如下: SimpleAudioEngine::getInstance()->pauseBackground ...
随机推荐
- Linux文本编辑器
1.编辑模式 2.命令模式 3.底部命令模式 注意:如果发现编辑不了.可能是因为非法退出产生一个后缀名为.swp 的临时隐藏文件. 将其删除重新编辑即可!
- 一次Linux磁盘损坏导致系统不可用恢复实例
Linux操作系统的server重新启动后.系统启动报错,系统无法正常使用. 1.报错信息 1.1.报错屏幕信息 1.2.报错信息提取关键信息 (1)/dev/sda3:File -(inode #1 ...
- PHP盛宴——经常使用函数集锦
近期写了蛮多PHP,也接触到挺多经常使用的函数,大多都记了笔记,发个博客出来.共同学习.事实上感觉学习一门语言,语法逻辑是软素养.而对语言的熟悉程度仅仅能随着使用时间的增长而慢慢增长,当对一门语言的函 ...
- Eclipse导入Maven项目出现错误:Unsupported IClasspathEntry kind=4
使用Eclipse导入Maven项目失败,提示: An internal error occurred during: "Importing Maven projects". Un ...
- 1.13 Python基础知识 - 字典和集合
一.字典 字典是一组键-值对的数据结构.每个键对应一个值.在字典中,键不能重复.根据键可以查询到值.字典是键和值的映射关系 字典的定义: 字典通过花括号中用逗号分隔的元素(键-值.键-值对使用冒号分隔 ...
- vue实现一个会员卡的组件(可以动态传入图片(分出的一个组件)、背景、文字、卡号等)
自己在写这个组件的时候主要遇到的问题就是在动态传入背景图片或者背景色的时候没能立马顺利写出来,不过现在实现了这个简单组件就和大家分享一下 <template> <div class= ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- 比較C++和Java 二
26.Java内置多线程支持.你能够通过继承Thread类来创建一个新的线程(重写run()方法).相互排斥发生在使用synchronized关键字作为类型修饰符修饰方法的对象级别. 在任一时刻,仅仅 ...
- 1.Python字符编码
1.编码简介 编码的种类情况 ASCII 占1个字节,只支持英文 GB2312 占2个字节,支持6700+汉字 GBK GB2312的升级版,支持21000+汉字 ks_c_5601-1987 韩国编 ...
- (转)iptables详细教程:基础、架构、清空规则、追加规则、应用实例
转自:http://lesca.me/archives/iptables-tutorial-structures-configuratios-examples.html iptables防火墙可以用于 ...