用JavaScript實現利用FLASH嵌入網頁聲音

來源:互聯網
上載者:User
javascript|網頁   本JavaScipt教程將讓你感受到FLASH給您帶來有聲世界的無窮魅力。在開始本教程之前,我先介紹一下本教程涉及到的內容:隱藏嵌入的SWF、 播放流同步的SWF、 從指定的幀上開始流、 停止和播放流、 檢查是否磁軌在播放、 檢查是否播放器準備好、 檢查SWF轉載的百分比、驗證SWF是否完全裝載好、檢查播放器的版本號碼、設定最小的播放器版本號碼、 清除錯誤資訊等等。好吧,開始我們的教程吧。

  隱藏嵌入的SWF

  FlashSound的JavaScript API往網頁插入一個FlashSound對象,隨同插入還有embedSWF()方法。但是在網頁中我們為什麼不能看到這個對象呢?哦,原來是FlashSound隱藏了這個對象。在Internet瀏覽器中,FlashSound是這個對象變得透明,也就是說你看不到這個對象,但實際上它是存在的。而在Netscape瀏覽器中,這個對象的顏色被指定為跟網頁相同的顏色,所以你也看不到它。你可以在Netscape瀏覽器中通過使用bgcolor屬性來設定對象的顏色。以上兩種方法正是隱藏對象的核心所在。試一試吧,下面My Code是實現當滑鼠移過對象時播放scale.swf檔案,所以我們這樣來建立FlashSound對象:

<SCRIPT>

mySoundObj.bgcolor = "#0000ff";

mySoundObj.embedSWF("scale.swf");

</SCRIPT>

  下面的代碼可以讓你在Netscape瀏覽器中看到在“Play a Scale”下面有一個小點,它正是我們建立的FlashSound,因為此時它的顏色不是與網頁的背景色相同,看看代碼吧:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<P><A HREF="javascript://"

>

Play a Scale</A>

<SCRIPT>

mySoundObj.bgcolor = "#0000ff";

mySoundObj.embedSWF("scale.swf");

</SCRIPT>

  播放流同步的SWF

  Flash檔案格式支援四種同步的類型:Event(事件)、Start(開始)Stop(停止)和Stream(流)。事件同步允許你同時播放多個磁軌的聲音;開始同步可以避免並行的磁軌播放;停止同步作用是停止磁軌播放;而對於流同步聲音包含了聲音的幀尺寸樣式,它可以反覆地天衣無縫地播放。不象其它真實的流聲音格式(比如Real Audio),Flash流檔案是在播放的時候裝載到瀏覽器中去的。當播放結束的時候,這個流聲音就全部被裝載瀏覽器的高度緩衝區中。所以在接下去的播放是來源與瀏覽器的告訴緩衝區,而不是來源於網頁。

  以下的串連是播放一個流同步,它解釋了FlashSound的JavaScript API,代碼如下:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT>

mySoundObj.embedSWF("earsonly.swf");

</SCRIPT>

</BODY>

</HTML>

  這裡值得注意的是Flash聲音被設定在Flash編輯器中來自動開始播放。
從指定的幀上開始流 FlashSound的JavaScript API支援象CD播放器那樣的隨機訪問磁軌中任何幀的能力。所以你可以指定任意的幀好來播放你喜歡的聲音。

  如圖1所示的四個串連是連到一個典型的CD播放器控制台上,第一個串連是回到第一幀開始播放,第二個串連是否從第100幀處開始播放,第三個串連是從第200幀處開始播放,而第四個串連是暫停所有的播放。

(圖1)

  詳細的代碼如下:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<A HREF="javascript://"

>

從第1幀開始播放</A>

<A HREF="javascript://"

>

從第1000幀開始播放</A>

<A HREF="javascript://"

>

從第200幀開始播放</A>;

<A HREF="javascript://"

>

暫停</A><

<SCRIPT>

mySoundObj.autostart = false;

mySoundObj.embedSWF("earsonly.swf");

</SCRIPT>

</BODY>

</HTML>

  這裡我們將autostart(自動開始播放)設定為Flase。這個例子很好地說明了我們怎樣利用JavaScript來重載Flash行為。

  停止和播放流

  FlashSound的JavaScript API支援一個等價於暫停方法,即TStopPlay()。這個TStopPlay()方法有一個參數,即timeline(時間軸)。我們可以使用“/”(反斜線)來指定主時間軸。TStopPlay()可以在指定的時間軸上停止向前播放,而不會重新播放。值得指出的是,這個TstopPlay()方法只能停止了設定為流同步的聲音的播放,而不能設定為時間或者開始同步的聲音的播放。

  同樣,FlashSound的JavaScript API頁支援等價於播放的方法,即TPlay()。這個TPlay()方法也有一個參數,也為時間軸。類似地,我們可以使用“/”來指定主時間軸。TPlay()可以在被TStopPlay()停止播放的幀處的時間軸(傳遞給TPlay()的參數)上開始播放,或者從第一幀開始播放。這個TPlay()方法也只能開始播放被設定為流同步的聲音,也不能開始播放被設定為時間同步或者開始同步的聲音。

(圖2)

  如圖2所示的三個串連是連到典型的磁帶錄音機控制台上。第一個串連是利用TGotoAndPlay()重新播放,第二個串連是利用TStopPlay()來暫停播放,而第三個串連是利用Tplay來繼續播放被暫停在某處的聲音。詳細的代碼如下: <HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<A HREF="javascript://" >

重新開始播放</A>

<A HREF="javascript://" >

暫停播放</A>

<A HREF="javascript://" >

繼續播放</A>

<SCRIPT>

mySoundObj.autostart = false;

mySoundObj.embedSWF("earsonly.swf");

</SCRIPT>

</BODY>

</HTML>

  檢查是否磁軌在播放 FlashSound的JavaScript API可以讓你檢查磁軌是否在播放,為了做到這點它為了提供了IsPlaying()方法。這個IsPlaying()方法沒有任何參數,它只是在有磁軌在播放的時候才返回True(真),否則就返回False(假)。所以你可以利用這個方法來建立一些例子,比如你可以在聲音磁軌沒有播放的情況下在另外一個磁軌播放聲音,這個實現起來是很簡單的。

  如圖3所示的前三個串連是連到典型的磁帶錄音機控制台。而右邊的串連是檢查在時間上是否有磁軌在播放。當滑鼠移過它的時候,我們就可以獲得“是否播放”的答案了。在圖3中第二行的串連是播放一個scale音樂,但是它只能在教程音樂沒有播放的時候才播放,為了實現這個目的,我們來檢查教程音樂的IsPlaying()的值是否為False。這裡教程音樂對象為mySoundObj1,而scale音樂對象是mySoundObj2,所以實現以上功能的語句應該為:

if (!mySoundObj1.IsPlaying()) mySoundObj2.TGotoAndPlay('/scale-event', 'start')

  好吧,我們可以試一試我們的這幾個串連了。首先開始播放我們的教程音樂,在停止該該教程音樂以播放scale音樂,然後在繼續教程音樂,這時候你會發覺scale音樂停止了。

(圖3)

  具體原始碼如下:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj1 = new FlashSound();

var mySoundObj2 = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<P><A HREF="javascript://"

>播放教程音樂</A>

<A HREF="javascript://"

>暫停播放</A>

<A HREF="javascript://"

>繼續播放</A>

<A HREF="javascript://"

>是否播放</A></P>

<A HREF="javascript://"

>播放Scale音樂</A></P>

<SCRIPT>

mySoundObj1.autostart = false;

mySoundObj1.embedSWF("earsonly.swf");

mySoundObj2.embedSWF("scale.swf");

</SCRIPT>

</BODY>

</HTML>

  檢查是否播放器準備好

  FlashSound的JavaScript API的isPlayerReady()方法在瀏覽器識別到播放器和JavaScrip對象並且SWF至少被裝載一個幀上的時候就返回True(真值)。如果不是這樣的話就返回False。FlashSound API是在所有其它API方法調用之前執行這個方法,所以你不用擔心多次使用它會有什麼問題的。但是你在調用一個Flash方法的時候,你必須使用isPlayerReady(),因為Flash方法不是FlashSound的 JaScript API的一部分。

  如圖4所示的串連是播放一個Flash流磁軌,它在FlashSound上播放一段教程音樂。我們可以增加兩條語句來實現,第一條,在嵌入教程音樂之前,我們列印出isPlayReady()的數值;第二條,在嵌入教程SWF之後列印出isPlayerReady()的數值。這樣我們可以看看這兩次的區別,從列印的結果我們可以發現:在嵌入教程音樂之前,isPlayReady()的值是False,而在嵌入教程音樂之後,其值是True。

(圖4)

  下面是詳細的代碼:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<P><A HREF="javascript://"

>播放教程音樂</A>

<A HREF="javascript://"

>暫停播放</A>

<A HREF="javascript://"

>繼續播放</A>

<A HREF="javascript://"

>是否播放</A></P>

<SCRIPT>

alert("Before Embedding, isPlayerReady() returns " +

mySoundObj.isPlayerReady());

mySoundObj.autostart = false;

mySoundObj.embedSWF("earsonly.swf");

alert("After Embedding, isPlayerReady() returns " +

mySoundObj.isPlayerReady());

</SCRIPT>

</BODY>

</HTML>

  檢查SWF轉載的百分比 FlashSound JavaScript API的PercentLoaded()方法返回SWF裝載到瀏覽器的百分比。這個數值可以是從0到100的任意值。如果你裝載一個SWF(當然包括流同步磁軌)到網頁的時候這個數值都將小於等於100。

  點擊如圖5所示的串連就可以播放一個Flash流磁軌,它是一個FlashSound的教程音樂。對於上面的代碼語句我們也只需要修改兩條語句。第一條,在嵌入教程音樂的之前列印出PercentLoaded()的數值;第二條,在嵌入教程音樂SWF之後列印這個數值。從結果中你可以發現:在嵌入教程音樂之前,PercentLoaded()的數值為0,而在嵌入教程音樂完畢之後,這個數值為100。

(圖5)

  以下是具體代碼:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<P><A HREF="javascript://"

>播放教程音樂</A>

<A HREF="javascript://"

>暫停播放</A>

<A HREF="javascript://"

>繼續播放</A>

<A HREF="javascript://"

>是否播放</A></P>

<SCRIPT>

alert("Before Embedding, PercentLoaded() returns " +

mySoundObj.PercentLoaded());

mySoundObj.autostart = false;

mySoundObj.embedSWF("earsonly.swf");

alert("After Embedding, PercentLoaded() returns " +

mySoundObj.PercentLoaded());

</SCRIPT>

</BODY>

</HTML>

  驗證SWF是否完全裝載好

  FlashSound JavaScript API的Tloaded方法返回SWF是否已經完全裝載到瀏覽器。這個數值可以為False或者True。當你往網頁嵌入你的SWF檔案(當然包括流同步磁軌)的時候,它返回Fasle值。只能等到裝載完畢的時候才返回True值。

  點擊如圖6所示的串連,就將播放一段Flash流磁軌,即FlashSound中的教程音樂。當然我們對上面的代碼要修改兩個地方。第一,在嵌入教程音樂之前列印Tloaded()的數值;第二,在嵌入教程音樂之後列印Tloaded()的數值。此時,從結果中你可以發現:在嵌入教程音樂之前,TLoaded()的數值為False值,而在嵌入教程音樂完畢之後,這個數值為True值。

(圖6)

  具體修改的代碼如下:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<P><A HREF="javascript://"

>播放教程音樂</A>

<A HREF="javascript://"

>暫停播放</A>

<A HREF="javascript://"

>繼續播放</A>

<A HREF="javascript://"

>是否播放</A></P>

<SCRIPT>

alert("Before Embedding, TLoaded() returns " +

mySoundObj.TLoaded());

mySoundObj.autostart = false;

mySoundObj.embedSWF("earsonly.swf");

alert("After Embedding, TLoaded() returns " +

mySoundObj.TLoaded());

</SCRIPT>

</BODY>

</HTML>

  檢查播放器的版本號碼 隨著Flash播放器的飛速發展,你可能很想知道你的Flash播放器的版本號碼是多少。值得慶幸的是,FlashSound JavaScript API就支援檢查播放器的版本號碼。這是FlashSound對象的一個屬性。為了得到這個數值,你需要編寫以下的代碼語句:

  FlashSound.playerVersion

  這個屬性應該設定為唯讀。雖然你可以指定它的數值,但是為播放器版本號碼指定一個數值久將導致一個錯誤。為了得到播放器的版本號碼,我們不必做任何事情而只需包括FlashSound JavaScript代碼,即flashsound.js。移動滑鼠到如圖7所示的串連就可以得到播放器的版本號碼。

(圖7)

  以下是具體的代碼:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

</HEAD>

<BODY>

<P><A HREF="javascript://"

>播放器的版本號碼</A></P>

</BODY>

</HTML>

  有時候,你可能想限制一下你的手稿程式來確定Flash播放器的版本號碼。你可以利用FlashSound對象的setMinPlayer()方法來實現它。FlashSound JavaScript API為你提供了許多強大的功能。你可以指定一個條代碼來執行當現有的播放器的版本號碼低於播放器的最小版本號碼的處理。

  下面讓我們來驗證一下ifNotMinPlayer()方法是如何工作的。因為最高的播放器版本號碼是5,所以我們將最小的播放器版本號碼設定為6來測試一下這種方法。這個方法ifNotMinPlayer()應該是在setMinPlayer()方法之後被使用的。點擊如圖8的串連可以看一下這種新方法的示範:

(圖8)

  為了設定最小的播放器版本號碼為6我們可以使用語句:setMinPlayer(6),並調用ifNotMinPlayer()以及帶有一個參數的函數downloadRecentPlayer()。這個downloadRecentPlayer()函數會提示你下載較新版本的播放器。

  以下是具體實現的代碼:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

function downloadRecentPlayer() {

alert("你需要下載較新版本的Flash播放器");

}

FlashSound.setMinPlayer(6);

FlashSound.ifNotMinPlayer('downloadRecentPlayer()');

</SCRIPT>

</BODY>

</HTML>

  設定最小的播放器版本號碼 有時候,在編寫一個獨立版本的手稿程式要花費許多時間。所以,你可能會選擇一種高於最小版本號碼的版本。通常,你可能會選擇最新的播放器版本。所以,就有這樣一個問題:為什麼我們要處理那些老版本的播放器呢?你可以利用setMinPlayer()方法來設定最小版本號碼。它唯一的一個參數是版本號碼。

  下面讓我們來驗證以下setMinPlayer()是如何工作的。因為最好的版本號碼是5,我們當我們設定最小的版本號碼為6的時候,播放器將不會發出聲音。

  如圖9所示的三行的串連會向我們展示這所有的一切。第一行第一個串連示設定最小的版本號碼為5,第二個示設定播放器的最小版本號碼為6,這是就會使得播放器不會發出聲音。你馬上可以試一試。

(圖9)

以下是具體代碼:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

<SCRIPT>

var mySoundObj1 = new FlashSound();

var mySoundObj2 = new FlashSound();

</SCRIPT>

</HEAD>

<BODY>

<P><A HREF="javascript://"

>

設定播放器最小版本號碼為5</A>

<A HREF="javascript://"

>

設定播放器最小版本號碼為 6</A></P>

<A HREF="javascript://"

>播放教程音樂</A>

<A HREF="javascript://"

>暫停播放</A>

<A HREF="javascript://"

>繼續播放</A>

<A HREF="javascript://"

>是否播放</A></P>

<A HREF="javascript://"

>播放Scale音樂</A></P>

<SCRIPT>

mySoundObj1.autostart = false;

mySoundObj1.embedSWF("earsonly.swf");

mySoundObj2.embedSWF("scale.swf");

</SCRIPT>

</BODY>

</HTML>

  清除錯誤資訊 清除錯誤資訊在所有的程式設計語言中都是一個值得討論的題目。通常它是一個令程式員頭痛的事情。對於一個程式也許你都有這樣的感受:當你編製程式的時候發現一個錯誤,你一定會興奮不已,或者你檢查了多遍程式還是發現不了錯誤存在的地方,同樣會令你煩惱。因為這是一個很嚴謹的題目 ,所以就讓你自己去決定了。毫無疑問,對於一個編程的新手來說,錯誤資訊是一個很重要的內容,因為你需要根據這個錯誤資訊來調試你的新手稿程式。

  利用FlashSound JavaScript API你可以選擇是否清除錯誤資訊,具體是利用FlashSound 對象的muteErrorMsg屬性。為了保留錯誤資訊,你需要將這個屬性設定為False。如果想在調試階段還是將它設定為True。其實預設值就是True,一旦設定為true。錯誤資訊就將被清除。

  下面的JavaScript程式碼封裝含了一個錯誤,因為有一個變數沒有被定義:

<SCRIPT LANGUAGE="JavaScript">

FlashSound.muteErrorMsg = a;

</SCRIPT>

我們可以為這個JavaScript錯誤選擇保留或者清除這個錯誤資訊。下面的手稿程式是清除錯誤資訊:

<SCRIPT LANGUAGE="JavaScript">

FlashSound.muteErrorMsg = true;

FlashSound.muteErrorMsg = a;

</SCRIPT>

如果要保留錯誤資訊,那麼手稿程式如下: <SCRIPT LANGUAGE="JavaScript">

FlashSound.muteErrorMsg = false;

FlashSound.muteErrorMsg = a;

</SCRIPT>

你可以點擊如圖10的兩個串連來看這兩個檔案的示範:

(圖10)

具體實現保留錯誤資訊的代碼如下:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

FlashSound.muteErrorMsg = false;

FlashSound.muteErrorMsg = a;

</SCRIPT>

</BODY>

</HTML>

具體實現清除錯誤資訊的代碼如下:

<HTML>

<HEAD>

<SCRIPT SRC="flashsound.js"></SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

FlashSound.muteErrorMsg = true;

FlashSound.muteErrorMsg = a;

</SCRIPT>

</BODY>

</HTML>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。