DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 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。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved