热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

html5学习笔记(html5新标签

HTML<audio>标签<audio>标签定义声音,比如音乐或其他音频流。IE只支持mp3safair不支持ogg其他浏览器全部支持mp3wavogg3种

HTML


IE 只支持mp3
safair不支持ogg
其他浏览器全部支持 mp3 wav ogg 3种格式

首先简要的介绍下这3种格式
1.mp3是一种有损格式,将音乐以1:10 甚至 1:12 的压缩率,所以音质不算极好,但是体积非常小。(目前mp3编码专利公司的专利到期了,意味着谁都可以用了不用给专利费)
2.WAV为微软公司(Microsoft)开发的一种声音文件格式,WAV是最接近无损的音乐格式,所以文件大小相对也比较大。
3.Ogg全称是OGGVobis(oggVorbis)是一种音频压缩格式,类似于MP3等的音乐格式。


一、Audio controls 属性
例子:
(html)


您的浏览器不支持 audio 元素。

(js)
document.getElementById("myAudio").cOntrols=true;
结果:

写上controls后就会出现音视频控件。
控件包括:
1)播放
2)暂停
3)进度条
4)音量

注意:
元素是为了
属性src 填写媒体资源,同时可以通过其文件扩展名来识别媒体文件的格式。
你可以多写几个来做各种浏览器的兼容。

可以使用document.getElementById("myAudio").cOntrols= true;在js中控制是否显示控件
true - 指定显示控件。
false - 默认。指定不显示控件。

 

二、Audio autoplay 属性
例子:
(html)


您的浏览器不支持 audio 元素。

(js)
document.getElementById("myAudio").autoplay=true;
结果:

可以使用document.getElementById("myAudio").autoplay=true;在js中控制是否自动播放。
autoplay 属性设置或返回音视频是否在加载后即开始播放。
true - 在音频加载完成后,自动开始播放。
false - 默认。在音频加载完成后,不自动播放。

 

三、Audio buffered 属性
例子:
(html)


您的浏览器不支持 audio 元素。



(js)
function bufffunc(){
var buff=document.getElementById("myAudio").buffered;
document.getElementById("buff").innerHTML="start:"+buff.start(0) +"~~~"+ "end:" + buff.end(0);
}
结果:

你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。
TimeRanges 对象表示音频的缓冲区间。
缓冲范围指的是已缓冲音视频的时间范围。如果用户在音视频中跳跃播放,会得到多个缓冲范围。

TimeRanges 对象属性:
length - 获得音视频中已缓冲范围的数量
start(index) - 获得某个已缓冲范围的开始位置
end(index) - 获得某个已缓冲范围的结束位置
注意:首个缓冲范围的下标是 0,start和end方法获得的是缓冲的秒数。

 

四、crossOrigin 属性
(这个属性范围过大 以后要单开一章)

 

五、Audio currentSrc 属性
例子:
(html)


您的浏览器不支持 audio 元素。



(js)
function bufffunc(){
var buff=document.getElementById("myAudio").currentSrc;
document.getElementById("buff").innerHTML=buff;
}
结果:

返回当前音频的URL(其实它只是返回了src里的路径,因为路径下没有456.mp3仍然能返回URL )

 

六、Audio currentTime 属性
例子:
(html)


您的浏览器不支持 audio 元素。



(js)

结果:

注意:如果使用var x=document.getElementById("myAudio").currentTime;这种方式时间也会被设置,但是音频控制器却不能跳跃到设置的时间。

currentTime 属性设置或返回音频播放的当前位置(以秒计)。当设置该属性时,播放会跳跃到指定的位置。

 

七、Audio defaultMuted 属性
例子:
(html)


您的浏览器不支持 audio 元素。



(js)

结果:

注意:只有 Google Chrome 和 Safari 6浏览器 支持 defaultMuted 属性。
defaultMuted 属性设置或返回音频是否默认静音。
true - 指定音频默认为静音。
false - 默认。指定音频默认为不静音。

 

八、Audio defaultPlaybackRate 属性
(html)


您的浏览器不支持 audio 元素。




(js)

结果:

指示音频/视频的默认播放速度。
例值:
1.0 正常速度
0.5 半速(更慢)
2.0 倍速(更快)
-1.0 向后,正常速度
-0.5 向后,半速
注意: Internet Explorer 8 及更早IE版本不支持 defaultPlaybackRate 属性。

 

九、Audio duration 属性
(html)


您的浏览器不支持 audio 元素。



(js)

结果:

duration 属性返回当前音频的长度,以秒计。
注意: Internet Explorer 8 及更早IE版本不支持该属性。

 

十、Audio ended 属性
(html)


您的浏览器不支持 audio 元素。



(js)

结果:

如果音频播放结束,则返回 true。否则返回 false。
注意: Internet Explorer 8 及更早IE版本不支持该属性。

 

十一、Audio loop 属性
(html)


您的浏览器不支持 audio 元素。




(js)

结果:

指示音频在结束时是否再次播放。
true - 指示音频在结束时再次播放。
false - 默认。指示音频在结束时不再播放。

 

十二、Audio muted 属性
(html)


您的浏览器不支持 audio 元素。




(js)

结果:

muted 属性设置或返回音频是否应该被静音(关闭声音)。
该属性反映了
该属性指定了音频是静音的。

注意: Internet Explorer 8 及更早IE版本不支持

指定输出音频是否静音:
true - 指示应该关闭音频的声音。
false - 默认。指示打开音频的声音。

 

十三、Audio networkState 属性
(html)


您的浏览器不支持 audio 元素。



(js)

结果:

表示音频元素的当前网络状态:
0 = NETWORK_EMPTY - 音频尚未初始化
1 = NETWORK_IDLE - 音频是活动的且已选取资源,但并未使用网络
2 = NETWORK_LOADING - 浏览器正在下载数据
3 = NETWORK_NO_SOURCE - 未找到音频来源

注意: Internet Explorer 8 或更早的浏览器不支持该属性。

 

十四、Audio paused 属性
(html)


您的浏览器不支持 audio 元素。



(js)

结果:

如果音频已暂停返回true,否则返回false。
注意: 该属性是只读的。

 

十五、Audio playbackRate 属性
(html)


您的浏览器不支持 audio 元素。




(js)

结果:

指示音频的当前播放速度。
例值:
1.0 正常速度
0.5 半速(更慢)
2.0 倍速(更快)
-1.0 向后,正常速度
-0.5 向后,半速

注意:Internet Explorer 9及更早IE版本不支持 playbackRate 属性。

 

十六、Audio preload 属性
(html)


您的浏览器不支持 audio 元素。




(js)

结果:

preload="auto" 指示一旦页面加载,则开始加载音频。
preload="metadata" 指示当页面加载后仅加载音频的元数据。
preload="none" 指示页面加载后不应加载音频。
注意: Internet Explorer 不支持 preload 属性。

 

十七、Audio readyState 属性
(html)


您的浏览器不支持 audio 元素。



(js)

结果:

表示音频元素的就绪状态:
0 = HAVE_NOTHING - 没有关于音频是否就绪的信息
1 = HAVE_METADATA - 关于音频就绪的元数据
2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒
3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
注意: 该属性是只读属性。
注意: Internet Explorer 8 及更早IE版本不支持该属性。

 

十八、Audio volume 属性
(html)


您的浏览器不支持 audio 元素。



(js)

结果:

volume 属性设置或返回音频的音量,从 0.0 (静音) 到 1.0 (最大声)。
规定音频的当前音量。必须是介于 0.0 与 1.0 之间的数字。
例值:
1.0 是最高音量(默认)
0.5 是一半音量 (50%)
0.0 是静音

ps:
注意要学习 Web Audio API (黑科技,装逼利器!!!)
学习黑科技需要了解一下的科学知识 1.多普勒效应2.傅里叶变换(了解时域和频域)(别看,看了就会发现自己有多渺小!!!)

 


推荐阅读
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置,但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置,并列出了出现的错误信息。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文介绍了在Mac上搭建php环境后无法使用localhost连接mysql的问题,并通过将localhost替换为127.0.0.1或本机IP解决了该问题。文章解释了localhost和127.0.0.1的区别,指出了使用socket方式连接导致连接失败的原因。此外,还提供了相关链接供读者深入了解。 ... [详细]
  • 展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]
  • 本文介绍了作者在开发过程中遇到的问题,即播放框架内容安全策略设置不起作用的错误。作者通过使用编译时依赖注入的方式解决了这个问题,并分享了解决方案。文章详细描述了问题的出现情况、错误输出内容以及解决方案的具体步骤。如果你也遇到了类似的问题,本文可能对你有一定的参考价值。 ... [详细]
  • 有没有一种方法可以在不继承UIAlertController的子类或不涉及UIAlertActions的情况下 ... [详细]
author-avatar
wjyyd1129
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有