HTML5下的Audio标签控件的歌曲播放暂停演示

 1 <!-- 使用了HTML5的标签<audio> 图片播放按钮增加了监听监听事件,控制音乐的播放暂停
 2      使用了document的几个重要函数:
 3      1.createElement创建标签对象,
 4      2.getElementById获取对象以及img对象的src属性
 5      3.document.body添加控件appendChild()函数
 6      了解document的强大。可以创建对象,操作body标签等-->
 7 <!DOCTYPE html>
 8 <html>
 9 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
10     <body>
11         <h3>音乐播放暂停示例</h3>
12
13         <p>点击按钮,播放、暂停音乐</p>
14
15         <img id="image_button" src="source/pause.jpg" onclick="myFunction()"></button>
16
17         <p id="txt">点击按钮播放音乐</p>
18
19         <script type="text/javascript">
20             var isPlay = false;
21             var x = document.createElement("AUDIO");
22             x.setAttribute("src", "source/music.mp3");
23             document.body.appendChild(x);
24             function myFunction()
25             {
26                 if (isPlay == false) {
27                     x.play();
28                     document.getElementById("image_button").src="source/play.jpg";
29                     document.getElementById("txt").innerHTML = "<浮夸> —— eason";
30                     isPlay = true;
31                 }else{
32                     x.pause();
33                     document.getElementById("image_button").src="source/pause.jpg";
34                     document.getElementById("txt").innerHTML = "点击按钮播放音乐";
35                     isPlay = false;
36                 }
37             }
38         </script>
39
40     </body>
41 </html>

注意需要将pause.jpg,play.jpg,music.mp3放到source文件夹下面。
文件结构是{index.html,source[pause.jpg,play.jpg,music.mp3]}  (index.html就是上面贴的代码文件,保存成html格式的。)

时间: 2024-10-28 09:33:40

HTML5下的Audio标签控件的歌曲播放暂停演示的相关文章

TabHost标签控件

如果在屏幕上要放置很多的控件,可能一个屏放不下,除了使用滚动视图的方式外,还可以使用标签控件对屏幕进行分页显示,当单击标签控件的不同标签时,会显示当前标签的内容,在android系统中一个标签可以是一个View或者是Activity. TabHost是标签控件的核心类,也是一个标签的集合,每一个标签是TabHost.TabSpec对象.通过TabHost类的addTab的方法添加多个TabHost.TabSpec对象. 下面是实列: 在main.xml文件中: 1 <RelativeLayout

PhoneGap+HTML5+jqueryMobile 开发安卓-DATE控件

原文:PhoneGap+HTML5+jqueryMobile 开发安卓-DATE控件 源代码下载地址:http://www.zuidaima.com/share/1550463778802688.htm DATE控件在安卓底下是无法正常调用安卓的日期键盘,需要利用PhoneGap对安卓的原生控件进行调用,但是还是没达到最佳效果,找到一个临时解决方案,给大家分享下,如果大家有更好的解决方案大家可以分享下,此方法有个缺陷就是控件有值的情况下无法调用时间控件. /** * */ package com

DS标签控件文本解析格式

DS标签控件使用DSL文本渲染引擎,支持DSL引擎代码.目前支持代码如下: <b>粗体</b> 以粗体显示 <i>斜体</i> 以斜体显示 <u>下划线</u> 以下划线显示 <link=标识,target=链接目标>链接</link> 插入一个链接,如果指定enabled=false,则显示为一个灰色不可点击的链接 <link=标识>链接</link> <link=标识,enab

Android学习笔记--design包下的两个控件

今天学习了design包下的两个控件,记录一下,首先需要我们依赖 1 compile 'com.android.support:design:25.0.0' 之后在XML文件中就可以使用了 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 x

Android 标签控件

版本:1.0 日期:2014.7.24 版权:© 2014 kince 转载注明出处 在有的应用中可能需要设置一些标签来方便用去去查询某些信息,比如手机助手或者购物软件之类都会有一些标签.对于软件开发初期来说,直接使用TextView.Button实现是最为简单的一种方式.但是这种方法也有其局限性,比如不能控制换行.耦合性低等缺点.所以除了解决这些问题之外,最好能够封装一个类库出来,方便以后使用. 首先新建一个Tag类, import java.io.Serializable; public c

HTML5统计图表amCharts JavaScript 统计图控件详细介绍

amCharts控件提供您最需要的JavaScript/HTML5图表.一套包括串行(列,栏,线,区,步线,平滑线,烛台,OHLC图),馅饼 /甜甜圈,雷达/极性和XY /分散/气泡图.amCharts的图表提供了无与伦比的功能和性能,在一个高级的,符合标准的包里. 支持所有高级浏览器 amCharts的JavaScript图表支持所有高级浏览器(包括但不限于)现代火狐,Chrome,Safari,Opera和Internet Explorer的版本.它的iPad,iPhone,iPod Tou

TextView(标签控件)

3.TextView(标签控件)   3.1常用      android:text                                              //显示文本内容      android:textColor                                         //文本颜色      android:textSize                                          //文字的大小      android

Java swing 之 标签控件 和 图标控件的使用

在Swing 中显示文本或提示信息的方法是使用标签,它支持文本字符串和图标.在应用程序的用户界面中,一个简短的文本标签可以使用户知道这些控件的目的,所以标签在Swing中是比较常用的控件. 1.标签的使用 标签由JLabel类定义,父类为JComponent类. 标签可以显示一行只读文本,一个图像或带图像的文本,它并不能产生任何类型的事件,只是简单低显示文本和图片,但是可以使用标签的特性指定标签上文本的对齐方式. JLabel类提供了多种构造方法,这样可以创建多种标签,例如显示只有文本的标签.只

如何写一套下拉刷新的控件?《MJRefresh原理浅析》(附Demo下载地址)

相信大家有很多人在做项目的时候都在使用MJRefresh 控件来实现下拉刷新的功能: MJRefresh经过不断的重构与更新迭代,现在不管是功能上还是代码结构上都是相当不错的,都是很值我们去学习的. 下面就是MJRefresh开源框架中中主要的一些类文件 MJRefresh主要的类文件 MJRefresh 的使用相信都难不倒大家 今天我主要想和大家分享一下MJRefresh的想法,因为我觉得这才是最重要的,献丑了,有理解的不对和不深入的地方,请大家多多点评哈! 试想,如果没有MJRefresh开