<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>

</head>

<body>  音乐

<audio src="b.mp3" controls="controls" preload id="music1" hidden>

</audio>

<span id="bf" onclick="bf();">播放/暂停</span>

<span id="bf" onclick="rbf();">重新播放</span>

<script>

function rbf(){

 var audio = document.getElementById('music1');

 audio.currentTime = 0;

}

function bf(){

 var audio = document.getElementById('music1');

 if(audio!==null){

    //检测播放是否已暂停.audio.paused 在播放器播放时返回false.

     alert(audio.paused);

  if(audio.paused)                     {

      audio.play();//audio.play();// 这个就是播放

  }else{

   audio.pause();// 这个就是暂停

  }

 }

}

</script>

</body>

</html>

js控制html5 audio的暂停、播放、停止的更多相关文章

  1. HTML5 audio 如何实现播放多个MP3音频

    <audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...

  2. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  3. html5 audio的暂停与播放

    在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...

  4. HTML5使用JavaScript控制＜audio>音频的播放

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

  5. js获取html5 audio 音频时长方法

    <audio src="我的好兄弟.mp3" controls="controls"  id="audio" style=" ...

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

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

  7. ios html5 audio 不能自动播放

    //修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser & ...

  8. html - html5 audio 音乐自动播放，循环播放等

    转自:http://blog.csdn.net/u012246458/article/details/50618759 audio播放音乐 <audio id="audio" ...

  9. MUI音乐播放html5+audio模块

    html5+ audio 模块MUI播放音频 Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件.通过plus.audio获取音频管理 ...

随机推荐

  1. 未能加载文件或程序集“System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”

    最近用vs2012发布程序,然后将更新后的程序文件部署到服务器上,由于服务器上本来有此系统,所以只更新了修改的文件 . 进行系统登录时提示:未能加载文件或程序集“System.Web.Extensio ...

  2. vs2015体验

    项目结构 bower.json Bower依据此文件安装需要的前端的包 package.json NPM依据此文件获取对应的包 project.json 包含用于NPM的"poststore ...

  3. Action重定向总结

    [HttpPost] public ActionResult StudentList( string StudName, string studName, DateTime BirthDay, For ...

  4. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  5. Arc engine - Geodatabase.

    Geodatabase以层次结构的数据对象来组织地理数据. 这些数据对象存储在要素类(Feature Classes).对象类(0bject classes)和数据集(Feature datasets ...

  6. gitweb随记

    1.安装gitweb,命令安装即可 apt-get install gitweb 2.clone cgi $ git clone git://git.kernel.org/pub/scm/git/gi ...

  7. C#中弹出新窗口

    1.在主窗体程序中定义对应别的窗体的对象 Form_a_class form1 = Form_a_class  test_delegate(); 2.调用显示 form1.ShowDialog();

  8. adb安装和卸载apk的方式

    昨天在使用adb卸载程序,结果死活卸载不了.我输入的命令和系统提示如下: D:\testApk>adb uninstall HelloWorld Failure 后来发现原来卸载程序时,只adb ...

  9. CentOS和Ubuntu的区别

    CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照开放源代码规定释出的源代 ...

  10. 利用程序将.jrxml导出为.jasper文件并用PDF显示(2)

    直接在Web项目中使用.jasper文件,其实在软件项目开发时,.jrxml文件经常修改,而且.jrxml还要在项目中进行保留备份,所以较为流行的做法是在项目中使用.jrxml来生成.jasper文件 ...