バックグラウンドでオーディオを再生する方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
このチュートリアルでは、オーディオ ビデオ (AV) ストリームに正しいカテゴリを選び、バックグラウンドで再生するよう構成するための方法を示します。
注 ビデオ ストリームがバックグラウンドで再生されるよう正しく分類されている場合、ビデオをバックグラウンド モードに切り替えると、オーディオ部分は再生されますが、対応するビデオは再生されません。これは、ビデオをバックグラウンドで再生している間のデバイスの電力要件を低減するための仕様です。
完全なメディア再生のサンプルで実際にこの機能を確認するには、「メディア再生の概要」を参照してください。
必要条件
HTML、JavaScript、Windows イベント、イベント処理について理解している必要があります。
Microsoft Visual Studio のインスタンスがインストールされている必要があります。
オーディオとビデオのストリーミングがサポートされているアプリが必要です。このための最も簡単な方法について詳しくは、「クイック スタート: Windows ストア アプリへのオーディオの追加」と「クイック スタート: ビデオとオーディオ」をご覧ください。
手順
ステップ 1: アプリ マニフェストでバックグラウンド オーディオを宣言する
Microsoft Visual Studio でアプリのプロジェクト ファイルを開きます。
ソリューション エクスプローラーで、Package.appmanifest ファイルをダブルクリックして [Package.appmanifest] ダイアログ ボックスを開きます。
[宣言] タブをクリックし、[使用可能な宣言] ドロップダウン ボックスで [バックグラウンド タスク] を選びます。
[追加] をクリックし、[オーディオ] チェック ボックスをクリックして、[OK] をクリックします。注 コードを手動で追加して、バックグラウンド オーディオを宣言することもできます。手動で宣言するには、Package.appmanifest ファイルで、<Application> タグと </Application> タグの間に次のコードを追加します。
<Extensions> <Extension Category="windows.backgroundTasks" StartPage="default.html"> <BackgroundTasks> <Task Type="audio" /> </BackgroundTasks> </Extension> </Extensions>前の手順でオーディオ用に作ったものと同じマニフェスト ファイルを使って、ビデオ ストリームのバックグラウンド宣言を行うこともできます。そのためには、"Task Type" 属性を audio に設定します。
Start page: fieldにプロジェクトのスタート ページを追加します。 これは通常、default.html です。
ステップ 2: msAudioCategory 属性を適切な値に設定する
ソリューション エクスプローラー ウィンドウで、HTML ファイルをクリックして開きます。たとえば、アプリの HTML ファイルの名前が MyApp.htm の場合、このファイルをクリックして開きます。
次のように、"msAudioCategory" 属性を <audio> タグに追加し、その属性を Communications または BackgroundCapabaleMedia に設定します。
<audio msAudioCategory="BackgroundCapableMedia" controls="controls"> <source src="Somesong.mp3"/> </audio>ビデオ ストリームの msAudioCategory を設定する場合は、次のコード スニペットを使います。
<video msAudioCategory="BackgroundCapableMedia" controls="controls"> <source src="Somevideo.mp4"/> </video >
ステップ 3: SystemMediaTransportControls をサポートする
Windows 8.1 では、MediaControl クラスの代わりに SystemMediaTransportControls クラスが導入されています。 アプリでは SystemMediaTransportControls を使う必要があります。完全な手順を示すために、MediaControl でバックグラウンド オーディオのサポートを実装する手順については、以降で説明しますが、SystemMediaTransportControls のみを使う必要があります。SystemMediaTransportControls の使い方について詳しくは、「システム メディア トランスポート コントロールの使用方法」をご覧ください。
アプリがオーディオをバックグラウンドで再生するように宣言されている場合でも、アプリでは、isPlayEnabled と isPauseEnabled を true に設定して SystemMediaTransportControls の再生ボタンと一時停止ボタンを有効にする必要があります。アプリでは、buttonpressed イベントを処理する必要があります。このイベントは、システム メディア トランスポート コントロールのボタンが押されたときにアプリに通知します。このような最小限のイベント処理サポートを提供することで、ユーザーは、アプリをフォアグラウンドで表示しなくても、オーディオの再生や一時停止を行うことができます。
buttonpressed イベントの処理に加えて、一時停止時、再生時など、メディアの状態が変化したときに SystemMediaTransportControls に通知する必要があります。 メディア状態の変更について SystemMediaTransportControl に通知するには、playbackStatus プロパティを MediaPlaybackStatus のいずれかの値に設定します。
paused、playing、ended の各イベントのイベント ハンドラーを持つ video オブジェクトを作成し、SystemMediaTransportControls を設定するコードを次に示します。このコードにより、再生ボタンと一時停止ボタンを有効にし、buttonpressed イベントのイベント ハンドラーを追加します。paused、playing、ended の各イベント ハンドラーについては、この例で後述します。
<video id="mediaVideo"
controls
src="https://www.contoso.com/clip.mp4"
onpause="mediaPaused(event)"
onplaying="mediaPlaying(event)"
onended="mediaEnded(event)" />
SystemMediaTransportControls systemControls;
public MainPage()
{
this.InitializeComponent();
// Hook up app to system transport controls.
systemControls = SystemMediaTransportControls.GetForCurrentView();
systemControls.ButtonPressed += SystemControls_ButtonPressed;
// Register to handle the following system transpot control buttons.
systemControls.IsPlayEnabled = true;
systemControls.IsPauseEnabled = true;
}
video の再生と一時停止を行うヘルパー メソッドと buttonpressed イベント ハンドラーを作成するコードを次に示します。
// Event handler for SystemMediaTransportControls' buttonpressed event
function systemMediaControlsButtonPressed(eventIn) {
var mediaButton = Windows.Media.SystemMediaTransportControlsButton;
switch (eventIn.button) {
case mediaButton.play:
playMedia();
break;
case mediaButton.pause:
pauseMedia();
break;
case mediaButton.stop:
stopMedia();
break;
// Insert additional case statements for other buttons you want to handle
}
}
// Plays the media.
function playMedia() {
var media = document.getElementById("mediaVideo");
media.play();
}
// Pauses the media.
function pauseMedia() {
var media = document.getElementById("mediaVideo");
media.pause();
}
// Stops the media.
function stopMedia() {
var media = document.getElementById("mediaVideo");
media.pause();
media.currentTime = 0;
}
メディア イベントを処理し、SystemMediaTransportControls の playbackStatus プロパティを更新するコードを次に示します。
// The media Play event handler.
function mediaPlaying() {
// Update the SystemMediaTransportControl state.
systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.playing;
}
// The media Pause event handler.
function mediaPaused() {
// Update the SystemMediaTransportControl state.
systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.paused;
}
// The media Ended event handler.
function mediaEnded() {
// Update the SystemMediaTransportControl state.
systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.stopped;
}
SystemMediaTransportControl について詳しくは、「システム メディア トランスポート コントロールの使用方法」と SystemMediaTransportControls のサンプルに関するページをご覧ください。
ステップ 4: メディア トランスポート コントロールに登録する (Windows 8)
重要
Windows 8.1 で導入された SystemMediaTransportControls クラスは、前の MediaControl クラスに代わるものです。 新しい SystemMediaTransportControls を、MediaControl の代わりに使ってください。 の使い方について詳しくは、「システム メディア トランスポート コントロールの使用方法SystemMediaTransportControls」をご覧ください。
音楽またはビデオをバックグラウンドで再生するようにアプリを登録してある場合でも、アプリでは、再生ボタン、一時停止ボタン、再生/一時停止ボタンに対するイベントを処理する必要があります。 このような最小限のイベント処理サポートを提供することにより、ユーザーは、アプリケーションをフォアグラウンドで表示しなくても、音楽やビデオ ストリームの再生や一時停止をバックグラウンドで行うことができます。
アプリにメディア ボタンを登録するには、まず MediaControl オブジェクトを作って、このオブジェクトにイベント リスナーを追加する必要があります。これにより、オブジェクトは指定されたイベントをリッスンできるようになります。またイベントが発生したとき、処理を行うために呼び出す関数も定義する必要があります。
ソリューション エクスプローラー ウィンドウで、アプリの JavaScript ファイルをクリックして開きます。たとえば、アプリの JavaScript ファイルの名前が MyApp.js の場合、このファイルをクリックして開きます。
次のコードを使って、アプリに [再生]、[一時停止]、[再生/一時停止] トグル ボタンを登録します。
// Declare a variable that you will use as an instance of an object var mediaControls; // Assign the button object to mediaControls mediaControls = Windows.Media.MediaControl; // Add an event listener for the Play, Pause Play/Pause toggle button mediaControls.addEventListener("playpausetogglepressed", playpausetoggle, false); mediaControls.addEventListener(“playpressed”, playbutton, false); mediaControls.addEventListener(“pausepressed”, pausebutton, false);次のコードを使って、[再生]、[一時停止]、[再生/一時停止] トグル ボタンが押されたときに発生するイベントを処理します。
// The event handler for the play/pause button function playpausetoggle() { if(mediaControls.isPlaying === true) { document.getElementById("audiotag").pause(); } else { document.getElementById("audiotag").play(); } } // The event handler for the pause button function pausebutton() { document.getElementById("audiotag").pause(); } // The event handler for the play button function playbutton() { document.getElementById("audiotag").play(); }
注釈
メディア トランスポート コントロールの操作方法について詳しくは、システム トランスポート コントロールの開発者向けガイドのページ (ホワイト ペーパー) をご覧ください。
注 アプリで、オーディオやビデオのストリーミング以外のタスクも実行する場合、アプリからフォーカスが移動して作業中のウィンドウではなくなった時点で、メディア以外に関連するタスクは停止される必要があります。 オーディオのストリーミングは、アプリでそのまま続行できます。オーディオ ビデオ ストリームの場合、ビデオ ストリーミングは自動的に停止します。クイック スタート: アプリでのビデオの再生
完全な例
オーディオとビデオのストリーミング方法の詳しい例については、再生マネージャーのサンプルに関するページと HTML メディア再生のサンプルに関するページをご覧ください。
関連トピック
システム トランスポート コントロールの開発者向けガイドのページ