pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML5音頻:嵌入簡單的聲音提示技巧

HTML5音頻:嵌入簡單的聲音提示技巧HTML5中文學習網,是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網站、HTML5資訊、HTML5應用、HTML5游戲、HTML5教程、HTML5視頻

了解如何使用HTML音頻元素嵌入在網頁中的聲音容易。在本教程中都包含大量的代碼示例。

截至目前,在Web瀏覽器中的音頻播放一直是位一個黑色的藝術。傳統上,有幾種方法可以嵌入在網頁中的聲音 -一些比別人更好的工作,和許多人只工作,如果你碰巧使用正確的瀏覽器,用正確的插件。

無處不在的Flash插件已經在很大程度上幫助,因為Flash可以很容易地嵌入音頻的方式,與大多數瀏覽器。然而,這并不能幫助iPhone和iPad不支持Flash的瀏覽器,如Safari。

總之,這是一個有點亂。

幸運的是,HTML5看起來使生活更容易為我們的開發人員,由于其音頻元素。這個元素可以讓你在網頁中嵌入音頻文件,以及控制播放的聲音使用JavaScript。更重要的是,它并不需要任何插件工作,并支持幾乎所有現代的Web瀏覽器。(我們會回來的瀏覽器支持!)

在本教程中,我將向您展示如何在一個頁面中的音頻元素嵌入聲音。我們也來看看如何觸發和停止通過JavaScript的音頻,以及如何確保我們的音頻可以播放許多Web瀏覽器可能。

HTML5 音頻元素

基本的音頻元素是很容易使用。由于這是本賽季是快樂的-和歐洲超過其公平份額的雪-讓我們的嵌入短的MP3片段的平克勞斯貝的“白色圣誕”

<audio src="WhiteChristmas.mp3"> </audio> //www.heatpress123.net

沒有太多的解釋,需要在這里!,就像<IMG>標簽可以讓你在一個頁面中包括一個圖像文件,<AUDIO>標簽包括一個音頻文件。

跨瀏覽器支持

雖然簡單,但是上面的例子中,它在許多瀏覽器將無法正常工作。這是音頻文件格式熱轉印機器

有些瀏覽器可以播放MP3文件,但不OGG文件,而其他瀏覽器可以播放OGG格式的文件,但沒有。MP3。大多數瀏覽器都可以播放WAV文件,WAV文件被解壓縮,導致大文件的大小,這是不切實際的短音頻片段以外的任何東西。

以下簡要介紹了當前的瀏覽器支持多種音頻格式:

瀏覽器 。MP3 。OGG 的。wav
火狐4 沒有
Safari 5的 沒有
Chrome 8的
Opera 11 沒有
IE9 沒有

您的瀏覽器支持哪些音頻格式。

從表中可以看到,唯一可行的方法,提供跨瀏覽器支持音頻播放服務的瀏覽器,可以播放MP3文件,和OGG文件到其他。

要做到這一點,你可以添加多個的<source>元素的<AUDIO>元素指定相同的多種格式的聲音文件。然后,瀏覽器會玩的第一個文件,它能夠播放。下面是一個例子:


<AUDIO>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>

當然,這并不意味著你需要創建。MP3和OGG版本的聲音文件(如Audacity的工具是方便),但它會給你良好的跨瀏覽器支持。

舊版本的Internet Explorer -也就是版本7和8 -甚至不支持的音頻元素。但是,我們將看看如何支持這些瀏覽器在本文的后面。

自動播放聲音

雖然上面的代碼中嵌入的聲音文件,它并沒有真正發揮它,所以它沒有多大用處,對自己的。如果我們想在頁面加載時自動播放聲音,然后我們就可以添加一個自動播放屬性的元素:

<audio autoplay>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>
//www.software8.co/wzjs添加播放器控制


 

雖然自動播放有時可能是有用的,也可以是惱人的聲音或音樂開始播放,只要你查看的頁面。一個更好的方法是將控件添加到音頻元素,使用戶可以啟動和停止自己的音頻:

<audio controls>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>

通常情況下,這增加了水平控制欄播放/暫停按鈕,可拖動播放頭一個時間表,以及音量控制,就像你看到了YouTube視頻底部。

這是值得銘記的控件將看 - 而且有時表現 - 在每個瀏覽器不同。例如,有沒有在iPhone上的音量控制,因為用戶可以只使用硬件音量按鈕。

循環播放

添加的循環屬性的<AUDIO>標簽的導致要播放的音頻不休:

<audio loop>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>

這可能是有用的事情,比如在游戲中的背景音樂和聲音效果。

預載提示

您可以選擇使用的預緊屬性,瀏覽器提示是否,以及如何,它應該在頁面加載時預加載的音頻文件。預加載的音頻文件,當用戶點擊“播放”按鈕,這是一個更好的用戶體驗,它可以起到瞬間。

此屬性的值是:

沒有預加載的音頻文件,瀏覽器不應該打擾。使用此設置時,你不要指望大多數用戶來說,或當你想保護你的服務器的帶寬盡可能多的音頻播放。元數據這是沒有,除非你告訴瀏覽器這是確定加載的音頻文件的元數據,如它的持續時間。不過,瀏覽器未預裝實際的音頻數據。汽車這是OK為預加載整個音頻文件的瀏覽器,如果它想。

例如:

<audio preload="metadata">   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>

請記住,預緊只是一個提示。瀏覽器可以選擇忽略它,做它想做的事情!

用JavaScript的播放控制


 

關于HTML5的音頻元素的好東西之一是,他們很容易控制使用JavaScript。音頻元素提供了許多有用的屬性和方法-這里有幾個:

play()在當前播放位置開始播放pause()暫停播放,如果當前正在播放的聲音canPlayType(類型)確定瀏覽器可以播放特定的媒體類型或不 duration聲音片段的長度,在幾秒鐘內currentTime當前播放位置,在幾秒鐘內。您也可以將此屬性設置為移動播放位置。

使用上述的一些屬性和方法,我們可以創建一些基本的按鈕來播放,暫停,停止我們的音樂:

<audio id="myTune">    <source src="WhiteChristmas.mp3">    <source src="WhiteChristmas.ogg">  </audio>  <button>Play Music</button>  <button>Pause Music</button>  <button>Stop Music</button>支持較舊版本的Internet Explorer

到目前為止,我們已經假定我們的用戶的瀏覽器支持HTML5 音頻元素。可悲的是,Internet Explorer 7和8不!(IE9的,令人欣慰的。)這將是很好的為這些用戶使用IE7或IE8提供某種回退。

一個簡單但有效的方式做到這一點是使用條件的意見,挑出這些瀏覽器,并提出他們的聲音文件指向的對象元素。然后,瀏覽器通常會顯示一個嵌入式控制器,允許用戶播放,暫停和倒帶的音樂很像HTML5控制器。下面是一個例子:

<div id="content">  <div style="margin-bottom: 20px;">    <button id="playButton">Play Music</button>    <button id="pauseButton">Pause Music</button>    <button id="stopButton">Stop Music</button>  </div>  <audio id="myTune" controls>    <source src="WhiteChristmas.mp3">    <source src="WhiteChristmas.ogg">  </audio><!--[if lt IE 9]>  <object id="myTuneObj" type="audio/x-mpeg" data="WhiteChristmas.mp3" autoplay="false" height="45">    <param name="src" value="WhiteChristmas.mp3" />    <param name="controller" value="true" />    <param name="autoplay" value="false" />    <param name="autostart" value="0" />  </object>  <script>    document.getElementById('playButton').onclick = function() { document.getElementById('myTuneObj').play() };    document.getElementById('pauseButton').onclick = function() { document.getElementById('myTuneObj').pause() };    document.getElementById('stopButton').onclick = function() { document.getElementById('myTuneObj').stop() };  </script><![endif]--></div>

上面的例子將在所有的瀏覽器支持HTML5音頻,IE7和8 回落的對象的方法。在有條件的意見,我也重新映射的點擊事件處理程序為播放/暫停/停止“按鈕,這樣,他們可以控制在IE7 / 8(音頻對象,輕而易舉地,提供的play() ,pause()和stop( )methods)。

另一種方法是,避免重新回到到一個閃存音樂播放器,IE7 / 8。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

主站蜘蛛池模板: 派克防爆伺服电机品牌|国产防爆伺服电机|高低温伺服电机|杭州摩森机电科技有限公司 | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | 郑州大巴车出租|中巴车租赁|旅游大巴租车|包车|郑州旅游大巴车租赁有限公司 | 砖机托板价格|免烧砖托板|空心砖托板厂家_山东宏升砖机托板厂 | 天津电机维修|水泵维修-天津晟佳机电设备有限公司 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 石栏杆_青石栏杆_汉白玉栏杆_花岗岩栏杆 - 【石雕之乡】点石石雕石材厂 | 高压微雾加湿器_工业加湿器_温室喷雾-昌润空气净化设备 | 粘度计维修,在线粘度计,二手博勒飞粘度计维修|收购-天津市祥睿科技有限公司 | 新能源汽车电机定转子合装机 - 电机维修设备 - 睿望达 | 扬子叉车厂家_升降平台_电动搬运车|堆高车-扬子仓储叉车官网 | 滚珠丝杆升降机_螺旋升降机_丝杠升降机-德迈传动 | 沈阳建筑设计公司_加固改造设计_厂房设计_设计资质加盟【金辉设计】 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | 污水提升器,污水提升泵,污水提升装置-德国泽德(zehnder)水泵系统有限公司 | 货车视频监控,油管家,货车油管家-淄博世纪锐行电子科技 | 隧道窑炉,隧道窑炉厂家-山东艾瑶国际贸易 | 泰国专线_泰国物流专线_广州到泰国物流公司-泰廊曼国际 | 山东石英砂过滤器,除氟过滤器「价格低」-淄博胜达水处理 | 123悬赏网_发布悬赏任务_广告任务平台 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 并离网逆变器_高频UPS电源定制_户用储能光伏逆变器厂家-深圳市索克新能源 | 自动部分收集器,进口无油隔膜真空泵,SPME固相微萃取头-上海楚定分析仪器有限公司 | 工程管道/塑料管材/pvc排水管/ppr给水管/pe双壁波纹管等品牌管材批发厂家-河南洁尔康建材 | 北京公寓出租网-北京酒店式公寓出租平台 | 吸音板,隔音板,吸音材料,吸音板价格,声学材料 - 佛山诺声吸音板厂家 | 低温柔性试验仪-土工布淤堵-沥青车辙试验仪-莱博特(天津)试验机有限公司 | 上海电子秤厂家,电子秤厂家价格,上海吊秤厂家,吊秤供应价格-上海佳宜电子科技有限公司 | 国产离子色谱仪,红外分光测油仪,自动烟尘烟气测试仪-青岛埃仑通用科技有限公司 | 济宁工业提升门|济宁电动防火门|济宁快速堆积门-济宁市统一电动门有限公司 | 艺术涂料|木纹漆施工|稻草漆厂家|马来漆|石桦奴|水泥漆|选加河南天工涂料 | 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 浙江清风侠环保设备有限公司| 西门子伺服控制器维修-伺服驱动放大器-828D数控机床维修-上海涌迪 | HYDAC过滤器,HYDAC滤芯,现货ATOS油泵,ATOS比例阀-东莞市广联自动化科技有限公司 | 艺术涂料|木纹漆施工|稻草漆厂家|马来漆|石桦奴|水泥漆|选加河南天工涂料 | 口臭的治疗方法,口臭怎么办,怎么除口臭,口臭的原因-口臭治疗网 | 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 列管冷凝器,刮板蒸发器,外盘管反应釜厂家-无锡曼旺化工设备有限公司 | 光伏家 - 太阳能光伏发电_分布式光伏发电_太阳能光伏网 |