html随场景变化的音效原理

首先，HTML5所定义的audio元素支持3种音频格式。分别是Ogg Vorbis、MP3、Wav。其中Ogg Vorbis支持Firefox 3.5、Opera 10.5、Chrome 3.0。MP3支持IE 9、Chrome 3.0、Safari 3.0。Wav支持Firefox 3.5、Opera 10.5、Safari 3.0。

它们是这样工作的，如果要HTML5当中播放音频代码如下：<audio src="song.ogg" controls="controls"></audio>

代码中：src="音频文件路径"（其中.ogg文件所支持的浏览器上面有所提），control 属性供添加播放、暂停和音量控件，<audio>与 </audio>之间插入的内容是供不支持 audio 元素的浏览器显示的。

对于音频的属性控制，我们需要<audio>标签的属性。autoplay属性：值“autoplay”。如果出现该属性，则音频在就绪后马上播放。controls属性：值“controls”。如果出现该属性，则向用户显示控件，比如播放按钮。loop属性：值“loop”。如果出现该属性，则每当音频结束时重新开始播放。preload属性：值“preload”。如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。src属性：值“url”。要播放的音频的 URL。

<audio>元素的优点在于：素能够播放声音文件或者音频流。改变了传统的音频在web上的播放观念，不再通过插件（如FLASH）来播放。规定了通过audio元素来包含音频的标准方法。使网页上的音频播放标准化。

1、点击屏幕交互点击是最常用的手势，经常用于页面切换。点击引导可以作为注释，用户可以理解H5内容，使用户能够按照H5的节奏 *** 作。例如，在《带上希望的种子去北京》中，用户可以点击手势“检查”行李箱，详细查看H5设计的内容。2、连续点击交互连击交互在游戏类中的应用比较多。在游戏类H5中，通常由连续点击生成的数值关联积分排名，具有竞技性质的H5可以进一步吸引用户参与。例如，《漫威电影十周年》的“揍”灭霸小游戏，用户继续点击屏幕，10秒内的点击次数就会计算出整个网络排名。3、长按交互长按是用户根据H5引导长时间触摸页面。长按交互用户需要保持手指静止状态，并在设计时提示H5播放进度参考，以避免乏味。例如，从腾讯公益的《敦煌未来博物馆》设计的风化过程来看，用户点击手机即可看到壁画随着年份推移逐渐风化的场景，还可以唤醒用户心中的文化保护意识。4、滑动交互拖拽交互必须在长按交互的基础上滑动，从一个点拖动到另一个点可以让用户自行控制速度。适合图片展示类的H5。例如，在《睡姿大比拼》中，用户可以拖动角色肢体来创建各种有趣的睡眠姿势。5、重力交互重力交互是一个非常直观的表达形式，用户可以轻松get到H5获得乐趣，这意味着手机硬件能升级给H5设计带来了更多的可能性。利用重力感应、陀螺仪、速度加速等硬件，对H5的玩法进行创新，提高用户的代入感。例如，安装在《一“陆”狂飙，极速挑战》上的赛车游戏是通过手机重力传感来调整小车的方向。6、全景交互全景交互在屏幕中以360度展现所有场景，用户可以通过滑动移动场景。这种H5格式(如VR)需要关注整个场景的设计，边界连接要足够顺畅，全景加载内容较大，一定要注意用户等待和屏幕卡顿的问题。例如，华为出品的《我的荣耀5G世界》中全景互动展示了未来丰富多彩的5G世界。以上几种就是现目前比较常见的H5交互元素，如有帮助请采纳~

HTML5页面的作用

1、令企业发展更开阔：HTML5页面作为新兴的微信推广工具，可以应用各种各样的场景，比如产品展示、购买流程，购物车等，能让客户有更快的速度体验，不再卡顿。

2、令体验更完美：HTML5页面中的各种炫酷创新的场景模拟、动画效果、互动方式，都能给用户带来新鲜独特的完美体验，这是传统手机页面所不能媲美的。

HTML5页面可以运用到哪些应用场景

1、企业宣传：高大上的游戏能帮助企业快速聚集人气，让你的客户订单从游戏开始。

2、企业招聘：令企业走向人才，令人才近距离了解企业、认识企业，令招聘更高效。

3、商业营销：通过HTML5特性，使用大转盘，刮刮卡，满减满增等增加客户粘性，从而达到营销目的。

4、报名预约：旅游线路报名、教育课程报名、餐厅预约等场合都可以，多种表单预设，也可以自己创建新的预约流程，自由选择。

---