HTML5音频和拖放介绍

柠檬甜味猫

于 2020-05-14 16:55:01 发布

阅读量354

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_46634102/article/details/106122733

版权

一、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));
}

柠檬甜味猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5音频和拖放介绍

一、HTML5音频介绍HTML5 规定了一种通过 audio 元素来包含音频的标准方法。音频格式和浏览器支持如下所示：.oggFireFox 3.5+，chrome 3.0+，Opera 10.5+.mp3Safari 3.0+，chrome 3.0+，IE 9.0+.wavFireFox 3.5+，Safari 3.0+，Opera10.5+例子：<body> <audio controls="controls"> &
复制链接

扫一扫