DIV CSS 佈局教程網

了解如何使用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。