【HTML5】 web上的音频

<!--
    audio通过属性的设置可以控制音频播放的行为:
    表6-2 audio元素的属性
    ————————————————————————————————————————————————————————
    属性            值                 描述
    autoplay        autoplay          音频就绪后马上播放
    controls        controls          向用户显示控件,比如播放按钮
    loop            loop            音频播放结束后重新播放
    preload         preload           音频在页面加载并预备播放。如果使用“autoplay”,则忽略该属性
    src             url               要播放音频的url
    ————————————————————————————————————————————————————————

    表6-3 audio元素的方法
    ————————————————————————————————————————————————————————
    方法                        描述
    addTextTrack()              向音频添加新的文本轨道
    canPlayType()               检测浏览器是否能播放指定的音频类型
    load()                      重新加载音频元素
    play()                      开始播放音频
    pause()                     暂停当前播放的音频
    ————————————————————————————————————————————————————————

    表6-4 audio元素的常用事件
    ————————————————————————————————————————————————————————
    事件                           描述
    canplay                       当前浏览器可以播放音频时
    pause                          当音频已暂停时
    play                            当音频已开始或不再暂停时
    playing                         当音频在因缓冲而暂停或停止后就就绪时
    progress                        当浏览器正在下载音频时
    volumechange                    当音量已更改时
    timeupdate                      当前的播放位置已更改时
    ————————————————————————————————————————————————————————

    -->

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>audio</title>
    </head>
    <body>
        <br>
        <audio src="E:\MUSIC\Diplo - revolution.mp3" controls="controls" autoplay="autoplay">
            您的浏览器不支持audio标签
        </audio>
    </body>
    </html>

<!--
    另外,audio元素可以设置多个source元素。source元素可以连接不同的音频文件,浏览器将使用第一个可识别的格式

    <audio controls>
    <source src=".../a.mp3" type="audio/mpeg"></audio>
    <source src=".../b.mp3" type="audio/ogg"></audio>
-->

运行结果:
时间: 2024-11-05 19:01:54

【HTML5】 web上的音频的相关文章

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在<矢量Chart图表嵌入HTML5网络拓扑图的应用>一文中已经讲述了关于setCompType()方法的应用,今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条,我们先来看下效果图: 从效果图可以看到,向服务器上传了一个mp4文件,并在最下方显示

利用HTML5技术在Web上实现对图形图像的处理——WebPhotoshop精简版

WebPhotoshop精简版是利用HTML5技术在Web上实现对图形图像的处理,构建易维护.易共享.易于拓展.实时性的Web图形图像处理平台. 精简版功能包括:图形绘制.图像处理.图像操作.完整版包括多人协作操作图像.实时交流.图片搜索,同时实现实时的多人协作处理图形图像技术.(完整版后续上传)一.功能说明:1.图形绘制 实现铅笔.画笔(书法画笔.喷枪.蜡笔.记号笔.水彩画笔)的绘制效果.实现直线.曲线.椭圆(圆).矩形(圆角矩形).三角形(直角三角形.等边三角形.任意三角形).多边形的绘制.

Html5 Web App 手机跨平台开发笔记

APP 开发平台包括Android 平台开发,Mac os X 平台开发以及Windows Phone 7平台开发.开发的程序都只能在各自手机系统上运行,如果开发出一种程序,能再以上任何系统上运行,那是多么美好的事情.而Html5 Mobile Web App就是其中一种跨平台方法.下面是相关知识的介绍 1.背景 HTML5是HTML的最新标准,HTML5的草案已经于2008年发布,目前W 3 C(万维网联盟)正在对此进行进一步完善.对许多人来说,早该进行这种改进了.十多年来,HTML一直没有进

网页上播放音频、视频Mp3,Mp4

昨天在处理网页上播放音频mp3,视频mp4上用了一天的时间来比较各种方案,最终还是选择了HTML5的 标签,谷歌浏览器.IE浏览器对标签的支持都很好,火狐上需要安装quicktime插件,效果比较差. <embed type="audio/mpeg" src="demo.mp3" style="width:400px; height:100px; border:3px solid black;" /> <embed src=&q

html5 Web Notifications

最近做的一个仿微信网页版的站点,有一个新需求, 需要实现在新消息入线时,有桌面通知的效果,所以最近就稍微了解一下这个html5的新属性. 这边有个不错的demo:html5 web notification demo 从上面这个demo中 我们就可以获取所需要的基本核心代码,如下: <script> var Notification = window.Notification || window.mozNotification || window.webkitNotification; Not

atitit.D&amp;D drag&amp;drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注解事件 document.dragover >>preventDefault 1 3. 代码(js) 1 4. C++ 实现拖曳 2 5. QT拖拽功能简介 - pcsuite的专栏 - 博客频道 - CSDN.NET.htm 2 1. DND的操作流程 Dragenter 事件::更改提示的颜色

深入 HTML5 Web Worker 应用实践:多线程编程

深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能,而且还增加了对本地数据库等 Web 应用功能的支持.其中,最重要的一个便是对多线程的支持.在 HTML5 中提出了工作线程(Web Worker)的概念,并且规范出 Web Worker 的三大主要特征:能够长时间运行(响应),理想的启

四种途径将HTML5 web应用变成android应用

作为下一代的网页语言,HTML5拥有很多让人期待已久的新特性.HTML5的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动 设备上使用HTML5技术.随着HTML5跨平台支持的不断增强和智能手机的迅速普,HTML5技术有着非常好的发展前景,甚至有人预言HTML5将引燃 移动平台游戏开发技术的新革命. 越来越多的开发者热衷于使用html5+JavaScript开发移动Web App.不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数.一方面,用户

HTML5 Web Storage

前言 本章主要内容是Web Storage与本地数据库,其中Web Storage 是对cookie的优化,本地数据库是HTML5新增的一个功能,使用它可以在客户端建立一个数据库 大大减轻服务器端的负担,加快访问数据速度. 学习本章需要掌握Web Storage基本概念,了解sessionStorage与localStorage的使用与差别 掌握本地数据库的使用 什么是WebStorage? 前面说过,webstorage是对cookie的优化而来,HTML4中使用cookie在客户端存储用户数