Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 1827|回复: 0

HTML 5 音频

  [复制链接]
  • TA的每日心情
    开心
    2021-3-12 23:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    发表于 2011-8-11 20:34:36 | 显示全部楼层 |阅读模式
    Web 上的音频

    直到现在,仍然不存在一项旨在网页上播放音频的标准。
    今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
    HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
    audio 元素能够播放声音文件或者音频流。



    音频格式
    当前,audio 元素支持三种音频格式:
    IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
    Ogg Vorbis
    MP3
    Wav





    如何工作
    如需在 HTML5 中播放音频,您所有需要的是:
    1. <audio src="song.ogg" controls="controls">
    2. </audio>
    复制代码


    control 属性供添加播放、暂停和音量控件。
    <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:
    实例
    1. <audio src="song.ogg" controls="controls">
    2. Your browser does not support the audio tag.
    3. </audio>
    复制代码


    上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
    要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。
    audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
    实例
    1. <audio controls="controls">
    2.   <source src="song.ogg" type="audio/ogg">
    3.   <source src="song.mp3" type="audio/mpeg">
    4. Your browser does not support the audio tag.
    5. </audio>
    复制代码




    <audio> 标签的属性

    属性描述
    autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
    controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
    looploop如果出现该属性,则每当音频结束时重新开始播放。
    preloadpreload如果出现该属性,则音频在页面加载时进行加载,并预备播放。
    如果使用 "autoplay",则忽略该属性。
    srcurl要播放的音频的 URL。



    使用firefox 6.0 的效果:

    回复

    使用道具 举报

    该用户从未签到

    发表于 2011-8-11 21:29:50 | 显示全部楼层
    很好
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2011-9-2 18:39:43 | 显示全部楼层
    很好。
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2012-6-18 16:42:36 | 显示全部楼层
    好帖还是要收藏,请继续








    中国城建网http://www.zgcjw168.com
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-1-8 13:19 , Processed in 0.315064 second(s), 37 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表