一、HTML5音频介绍
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
音频格式和浏览器支持如下所示:
.ogg | FireFox 3.5+,chrome 3.0+,Opera 10.5+ |
.mp3 | Safari 3.0+,chrome 3.0+,IE 9.0+ |
.wav | FireFox 3.5+,Safari 3.0+,Opera10.5+ |
例子:
<body>
<audio controls="controls">
<source
src="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg"
type="audio/ogg"
/>
<source
src="http://labfile.oss.aliyuncs.com/courses/1248/phone.mp3"
type="audio/mpeg"
/>
</audio>
</body>
注: 与 之间插入的内容是供不支持 audio 元素的浏览器显示的。audio 元素允许多个 source 元素,source 元素可以链接不同的音频文件,浏览器将使用第一个可识别的格式。
引入单个文件也可以这样写:
<body>
<audio
src="http://labfile.oss.aliyuncs.com/courses/1248/phone.mp3"
controls="controls"
>
你的浏览器不支持video元素
</audio>
</body>
audio 标签的属性如下所示:
二、HTML5拖放概述
拖放(Drag 和 drop)是 HTML5 标准的组成部分,任何元素都能够拖放,从字面意思上来理解,拖放就是抓取对象后拖到另一个位置上。
注:img元素和 a 元素(必须指定 href)默认允许拖放。
打开 Terminal 终端:
在 Terminal 中输入以下命令获取本节使用到的图片:
wget http://labfile.oss.aliyuncs.com/courses/1248/drag-image.png
图片的下载位置,请注意在后续 html 文件所在同目录下。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。
三、HTML5 拖放使用
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#div1 {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把图片拖放到矩形中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img
id="drag1"
src="drag-image.png"
draggable="true"
ondragstart="drag(event)"
/>
</body>
</html>
运行效果为:
下面介绍拖放是如何实现的。
确定什么是可拖动的
为了使元素可拖放,首先把 draggable 属性设置为 true,再加上全局事件处理函数 ondragstart,如下所示:
<img draggable="true" ondragstart="drag(event)" />
定义拖动数据
每个 drag event 都有一个 dataTransfer 属性保保存事件的数据。这个属性( DataTransfer 对象)也有管理拖动数据的方法。setData() 方法添加一个项目的拖拽数据,如下面的示例代码所示:
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
在这个例子中数据类型是 “Text”,值是可拖动元素的 id (“drag1”)。
定义一个放置区
ondragover 事件规定在何处放置被拖动的数据。默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式,如下所示:
function allowDrop(ev) {
ev.preventDefault();
}
进行放置
当放置被拖数据时,会发生 drop 事件。如下所示:
function drop(ev) {
//调用 preventDefault() 来避免浏览器对数据的默认处理
ev.preventDefault();
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
var data = ev.dataTransfer.getData("Text");
//被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素(目标元素)中
ev.target.appendChild(document.getElementById(data));
}