> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/sampleapp/tips/media.md).
# 音楽の再生方法
Monaca で音楽を再生する方法について説明します。
HTMLのAudioオブジェクトを利用することで、音声ファイルを操作することができます。
下のプロジェクトではアプリ内(wwwディレクト配下)に保存した音声ファイルと外部サーバーに保存してある音声ファイルを再生しています。
## 画面の作成
音声ファイルを操作するためのページを作成します。
* 音声ファイルの選択
* 音声の再生・一時停止・停止ボタン
* 音声の再生位置の表示
下記のプロジェクトでは、プロジェクトのwwwディレクト配下に保存した`song1.mp3` と 外部サイトにあるmp3ファイルをURLで指定しています。
```markup
Playing Sound
Song 1
Song 2
Play
Pause
Stop
```
## 音声再生の準備
ページが読み込まれたとき(`window.onload`)に音声再生の準備をします。
まず、音声ファイルとタイマーを管理するための変数を宣言します。次に、音声ファイルを再生するためのAudioオブジェクトを作成し、`audioElement`に代入します。さらに、音声が再生されたとき、一時停止したとき、再生が終了したときに呼び出される関数を設定します。
```javascript
var audioElement;
var srcFile = "sample.mp3";
var timer;
window.onload = function() {
audioElement = new Audio(srcFile);
audioElement.addEventListener('play', updateAudioPosition, false);
audioElement.addEventListener('pause', stopUpdatingAudioPosition, false);
audioElement.addEventListener('ended', stopUpdatingAudioPosition, false);
};
```
## 音声の操作
次に3つの関数、音声の再生、一時停止、停止を作成します。
* `playSound`関数では、選択された曲を再生します。
* `pauseSound`関数では、音声の再生を一時停止します。
* `stopSound`関数では、音声の再生を停止し、再生位置を初めに戻します。
```javascript
function playSound() {
const selectedSong = document.getElementById('songSelect').value;
const selectedFilename = getFilenameFromPathOrURL(selectedSong);
const audioFilename = getFilenameFromPathOrURL(audioElement.src);
if (audioFilename != selectedFilename) {
audioElement.src = selectedSong;
}
}
function pauseSound() {
audioElement.pause();
}
function stopSound() {
audioElement.pause();
audioElement.currentTime = 0;
setAudioPosition(audioElement.currentTime);
}
function getFilenameFromPathOrURL(input) {
// URLの場合として解析を試みる
try {
const urlObj = new URL(input);
return urlObj.pathname.split('/').pop();
} catch (e) {
// URLではない場合、単純なパス/ファイル名として扱う
return input.split('/').pop();
}
}
```
## **音声の再生位置の表示**
音声の再生位置を表示し、更新する処理を作成します。
* `setAudioPosition`関数では、指定された位置を画面に表示します。
* `updateAudioPosition`関数では、1秒ごとに音声の再生位置を更新します。
* `stopUpdatingAudioPosition`関数では、音声の再生位置の更新を停止します。
```javascript
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position.toFixed(2) + " sec";
}
function updateAudioPosition() {
timer = setInterval(function() {
setAudioPosition(audioElement.currentTime);
}, 1000);
}
function stopUpdatingAudioPosition() {
clearInterval(timer);
}
```
## コード全体
上記で説明したコードの全体は次のようになります。
```html
Playing Sound
Song 1
Song 2
Play
Pause
Stop