<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控制播放 暂停的更多相关文章

  1. duilib 增加gif控件(基于gdi+,可控制播放暂停,自动设置大小)

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42502081 因为项目需要我需要给duilib增加一个gif控件,目前已 ...

  2. 用JS控制video暂停再播放

    模块就是用来进行封装,进行高内聚 低耦合的功能.其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须要引用它,ng2 中叫import 导入.那么我们看模块是否有 ...

  3. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  4. js控制html5 audio的暂停、播放、停止

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  5. HTML5背景音乐的暂停与播放

    HTML代码:     <audio id="myaudio" loop="loop" preload="auto" autoplay ...

  6. js控制html5 【video】标签中视频的播放和停止

    需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...

  7. HTML5 - 使用JavaScript控制<audio>音频的播放

    有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效.   1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...

  8. HTML5使用JavaScript控制<audio>音频的播放

    1.播放音乐最简单的样例 <audio controls> <source src="horse.mp3" type="audio/mpeg" ...

  9. Cocos2d-x中背景音乐播放暂停与继续

    背景音乐播放暂停与继续似乎我们很少使用,事实上也正是如此,背景音乐播放暂停与继续实例代码如下: SimpleAudioEngine::getInstance()->pauseBackground ...

随机推荐

  1. Android学习笔记进阶十一图片动画播放(AnimationDrawable)

    大家平时见到的最多的可能就是Frame动画了,Android中当然也少不了它.它的使用更加简单,只需要创建一个 AnimationDrawabledF对象来表示Frame动画,然后通过addFrame ...

  2. go timer

    go timer package main import ( "fmt" "time" ) func debounce(interval time.Durati ...

  3. 【2017中国大学生程序设计竞赛 - 网络选拔赛】A Secret

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6153 [题意] ,S2中出现的次数与其长度的乘积之和.  [题解] 扩展KMP的模板题. 首先,把S2和 ...

  4. Windows系统 配置Java的JDK环境变量

    安装了JDK或者绿色版后,在系统的环境变量设置中,进行以下配置: 1.新建->变量名"JAVA_HOME",变量值"D:\jdk1.8.0_05"(即JD ...

  5. dot-files/directories 点开头的文件或文件夹(windows/linux)

    What's so special about directories whose names begin with a dot? 不管是 windows 系统,还是类 linux 系统,以点开头的文 ...

  6. C#中数组与ArrayList的简单使用

    1. 多维数组 2. 锯齿数组 3. 数组的常用操作 4. ArrayList 1. 多维数组 多维数组:行数和列数在定义时已确定 string[,] arr = new string[2, 3]; ...

  7. 绝对定位等html结构,水平居中的处理方案

    1.父子结构,父relative,子absolute.子元素要水平居中:left:50%:margin-left:子元素一半的宽度.因为定位的left是按左边框开始计算.[固定问题的模块化解决]

  8. LeetCode Algorithm 05_Longest Palindromic Substring

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  9. [D3] Build a Column Chart with D3 v4

    Column and bar charts are staples of every visualization library. They also make a great project for ...

  10. [Angular2 Router] Redirects and Path Matching - Avoid Common Routing Pitfall

    In this tutorial we are going to learn how we can can configure redirects in the angular 2 router co ...