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 ...
随机推荐
- 如何创建Hiren的BootCD USB磁盘 -- 制作U盘启动盘
如何创建Hiren的BootCD USB磁盘 原文 https://www.wintips.org/how-to-create-hirens-bootcd-usb-disk/ 本文基本是谷歌翻译 H ...
- js17---创建对象:构造函数式和原型组合模式、动态原型模式、稳妥构造函数式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Elasticsearch5.0.1 + Kibana5.0.1 + IK 5.0.1
Elasticsearch5.0.1 + Kibana5.0.1 + IK 5.0.1安装记录 最近工作需要,开始研究ES,当前ES的最新版本为5.0.1,从之前的2.x的版本号一下升级到5.x,主要 ...
- 洛谷P1143 进制转换
题目描述 请你编一程序实现两种不同进制之间的数据转换. 输入输出格式 输入格式: 输入数据共有三行,第一行是一个正整数,表示需要转换的数的进制n(2≤n≤16),第二行是一个n进制数,若n>10 ...
- 带你走进EJB--EJB和Spring对比(转)
http://blog.csdn.net/jnqqls/article/details/17723417 通过对EJB系列的总结和学习我们已经对EJB有了基本的了解,但是为了更进一步的去深入学习EJB ...
- HDU 4607 Park Visit HDU暑期多校1
10W个点的一棵树,边权为1 求访问K个点要走过的最小路程 BFS求出一条最长路以后,我们可以YY出其他的边都要重复走两次 树上的最长路可以从任意一点开始BFS求出这点的最大距离,再把终点设置为起点再 ...
- 洛谷 P2026 求一次函数解析式
P2026 求一次函数解析式 题目背景 做数学寒假作业的怨念…… 题目描述 给定两个整点的坐标,求它们所在直线的函数解析式(一次函数). 输入输出格式 输入格式: 输入共两行. 第一行有两个整数x1, ...
- Bag of Features (BOF)图像检索算法
1.首先.我们用surf算法生成图像库中每幅图的特征点及描写叙述符. 2.再用k-means算法对图像库中的特征点进行训练,生成类心. 3.生成每幅图像的BOF.详细方法为:推断图像的每一个特征点与哪 ...
- Kurento应用开发指南(以Kurento 5.0为模板) 之中的一个:简单介绍,安装与卸载
文件夹 1. Kurento是什么 3 2. Kurento简单介绍 3 2.1 WebRTC媒体server ...
- 纯C++实现的HTTP请求封装(POST/GET)
纯C++实现的HTTP请求(POST/GET),支持windows和linux, 进行简单的封装, 方便调用.实现如下: #include "HttpConnect.h" #ifd ...