共用方式為


快速入門:將音訊新增到應用程式 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

本主題說明音訊串流類別,以及如何使用 <audio> 標記為您的應用程式新增音訊串流功能。

Windows 8 提供一個平台,在這個平台上使用 HTML5 將音訊串流處理功能新增到 Windows 市集應用程式更方便。

音訊標記含有下列屬性:

屬性 允許的值 說明
autoplay autoplay 指定音訊準備好之後就會開始播放
controls controls 指定應該顯示音訊控制項 (例如播放/暫停按鈕等等)。
loop loop 指定每次音訊播完之後,就從頭播放
preload

auto

metadata

none

指定當載入頁面時,作者是否認為應該載入音訊以及載入的方法
src <檔案路徑> 指定音訊檔案的路徑

 

Microsoft 提供另一個屬性 msAudioCategory,您可以用來強化音訊感知應用程式的行為。下表顯示這個屬性允許的值,以及簡要的功能介紹。

串流類別 說明 可以在背景執行?
Alert 循環播放或較長時間播放警示聲:
  • 警告
  • 鈴聲
  • 鈴響通知
  • 需要減弱現有音訊的聲音
BackgroundCapableMedia 用於需要在背景繼續播放的音訊。 範例包括以下本機媒體播放案例:
  • 本機播放清單
  • 串流廣播
  • 串流播放清單
  • 音樂影片
  • 串流音訊/廣播、YouTube、Netflix 等等。
Communications 用於串流處理通訊音訊,例如以下各項:
  • VOIP
  • 即時交談或其他類型的通話
ForeGroundOnlyMedia 為了只在背景播放而設計的遊戲或其他聲音,但是會將現有的背景媒體聲音調成靜音。
  • 遊戲經驗 (跳舞遊戲、音樂遊戲) 所需的遊戲音訊。
  • 劇情片 (設計方式是當它們進入背景時暫停)
GameEffects 為了與現有音訊混合而設計的遊戲音效
  • 人物談話
  • 所有與音樂無關的聲音
GameMedia 遊戲播放的背景音樂
SoundEffects 為了與現有音訊混合而設計的遊戲或其他音效:
  • 人物談話
  • 嗶聲、鈴聲、簡短的聲音
Other 預設音訊類型,建議用於所有不需要在背景繼續播放的音訊媒體。

 

目標: 使用最簡單的方法將音訊功能新增到 Windows 市集應用程式

先決條件

您必須熟悉 HTML、JavaScript、Windows 事件和事件處理。

您安裝的媒體播放器應該可以播放 MPEG-Layer 3 (MP3) 或其他數位音樂檔案。

完成所需的時間: 15 分鐘.

指示

利用 <audio> 標記新增音訊

新增 <audio> 標記時,您必須使用 controls 屬性,指出您希望顯示控制項 (按鈕)。下列步驟說明如何達到這個目的。

  • 複製以下程式碼,並貼到 HTML 檔案中您想顯示音訊控制項的位置:

    // Adding the <audio> tag to your app
    <audio controls="controls"> 
    <source src="song.mp3"/> 
    </audio>
    

新增 msAudioCategory 屬性

msAudioCategory 屬性新增至 <audio> 標記時,您可以提供更多的功能。 msAudioCategory 屬性會將特定的強化行為與您的音訊標記建立關聯,藉此提升對於應用程式的使用者經驗。下列步驟示範如何新增 msAudioCategory 屬性。

  • msAudioCategory 屬性新增至 <audio> 標記內,如下所示:

    // Enhancing behavior of audio tag
    // with the msAudioCategory attribute
    <audio msAudioCategory="BackgroundCapableMedia" controls="controls"> 
    <source src="song.mp3"/> 
    </audio>
    

摘要與後續步驟

選取串流的類別時請務必小心,因為您的應用程式在不同狀況下會有不同的反應。

下一個主題如何設定媒體控制項的按鍵會教您如何新增和設定 Windows 市集應用程式的媒體按鈕。然後您可以使用這些按鈕來播放、暫停、停止或者快速播放音訊串流。

相關主題

如何設定媒體控制項的按鍵

設定媒體按鍵範例

播放管理員範例