バックグラウンドでオーディオを再生する方法 (HTML)

[アーティクル]
02/12/2016

[ この記事は、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 メディア再生のサンプルに関するページをご覧ください。

次の方法で共有

バックグラウンドでオーディオを再生する方法 (HTML)

必要条件

手順

ステップ 1: アプリマニフェストでバックグラウンドオーディオを宣言する

ステップ 2: msAudioCategory 属性を適切な値に設定する

ステップ 3: SystemMediaTransportControls をサポートする

ステップ 4: メディアトランスポートコントロールに登録する (Windows 8)

注釈

完全な例

関連トピック

その他のリソース

次の方法で共有

バックグラウンドでオーディオを再生する方法 (HTML)

必要条件

手順

ステップ 1: アプリ マニフェストでバックグラウンド オーディオを宣言する

ステップ 2: msAudioCategory 属性を適切な値に設定する

ステップ 3: SystemMediaTransportControls をサポートする

ステップ 4: メディア トランスポート コントロールに登録する (Windows 8)

注釈

完全な例

関連トピック

その他のリソース

ステップ 1: アプリマニフェストでバックグラウンドオーディオを宣言する

ステップ 4: メディアトランスポートコントロールに登録する (Windows 8)