JavaScriptでaudioタグの音楽再生処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

今回は、Web上に設置されたボタンから音楽を流す方法を勉強しました。

demoは、「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

JavaScriptでアプリ開発 ~環境構築~

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css
└── sounds

$ tree

├── index.html

├── script.js

└── style.css

└── sounds

音声(sounds)は「こちら」で取得できます。

CSS版

CSSでブロックをスタイリング!

開発

ページの作成

最初にページを作成しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Sound Board</title>
  </head>
  <body>
    <audio id="applause" src="sounds/applause.mp3"></audio>
    <audio id="boo" src="sounds/boo.mp3"></audio>
    <audio id="gasp" src="sounds/gasp.mp3"></audio>
    <audio id="tada" src="sounds/tada.mp3"></audio>
    <audio id="victory" src="sounds/victory.mp3"></audio>
    <audio id="wrong" src="sounds/wrong.mp3"></audio>

    <div id="buttons"></div>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Sound Board</title>

</head>

<body>

</body>

</html>

HTMLのaudioタグは、文書内に音声コンテンツを埋め込むために使用します。

このHTMLをブラウザ上で表示すると以下のようになります。

何も表示されていません。audioタグに「controls」などのタグをつければいい感じの再生ボタンが表示されますが、今回はJavaScriptでボタンを作るのでひとまずこれでOKです。

スタイルの追加

次にスタイルを記述しましょう。

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(161, 100, 223);
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.btn {
  background-color: rebeccapurple;
  border-radius: 5px;
  border: none;
  color: #fff;
  margin: 1rem;
  padding: 1.5rem 3rem;
  font-size: 1.2rem;
  font-family: inherit;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.9;
}

.btn:focus {
  outline: none;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: rgb(161, 100, 223);

font-family: 'Poppins', sans-serif;

display: flex;

flex-wrap: wrap;

align-items: center;

justify-content: center;

text-align: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.btn {

background-color: rebeccapurple;

border-radius: 5px;

border: none;

color: #fff;

margin: 1rem;

padding: 1.5rem 3rem;

font-size: 1.2rem;

font-family: inherit;

cursor: pointer;

}

.btn:hover {

opacity: 0.9;

}

.btn:focus {

outline: none;

}

ここまで実装すると以下のようになります。

JavaScriptの実装

音源ボタンを作成する

最初に音源ボタンを作成しましょう。

// 音源ボタンの元(これはbuttonのIDにもなっている)
const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']

// 音源ボタンを作成
sounds.forEach(sound => {
  // button要素を作成
  const btn = document.createElement('button')
  // btnクラスを追加
  btn.classList.add('btn')
  // buttonのラベルを設定
  btn.innerText = sound
  // buttonsIDの子要素としてbuttonを追加
  document.getElementById('buttons').appendChild(btn)
})

// 音源ボタンの元(これはbuttonのIDにもなっている)

const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']

// 音源ボタンを作成

sounds.forEach(sound => {

// button要素を作成

const btn = document.createElement('button')

// btnクラスを追加

btn.classList.add('btn')

// buttonのラベルを設定

btn.innerText = sound

// buttonsIDの子要素としてbuttonを追加

document.getElementById('buttons').appendChild(btn)

})

createElementでHTML要素を作成できます。そして、この要素にbtnクラスを追加し、innerTextにてボタンのラベルを設定、getElementByIdでbuttonsIDが付与されているHTMLの子要素として追加しています。

ここまで実装すると以下のように表示されます。

クリックイベントの登録

次にクリックイベントを登録して、音源ボタンを押下した時に音楽が流れるようにしましょう。

// 音源ボタンを作成
sounds.forEach(sound => {
  ...
  // buttonのラベルを設定
  ...

  // clickイベントを登録
  btn.addEventListener('click', () => {
    // playで音楽が流せる
    document.getElementById(sound).play()
  })

  // buttonsIDの子要素としてbuttonを追加
})

// 音源ボタンを作成

sounds.forEach(sound => {

...

// buttonのラベルを設定

...

// clickイベントを登録

btn.addEventListener('click', () => {

// playで音楽が流せる

document.getElementById(sound).play()

})

// buttonsIDの子要素としてbuttonを追加

})

soundsに設定した値(‘applause’, ‘boo’, ‘gasp’, ‘tada’, ‘victory’, ‘wrong’)は、audioタグのIDです。

    <audio id="applause" src="sounds/applause.mp3"></audio>
    <audio id="boo" src="sounds/boo.mp3"></audio>
    <audio id="gasp" src="sounds/gasp.mp3"></audio>
    <audio id="tada" src="sounds/tada.mp3"></audio>
    <audio id="victory" src="sounds/victory.mp3"></audio>
    <audio id="wrong" src="sounds/wrong.mp3"></audio>

そのため、getElementById(sound)にて、audio要素が取得できます。audio要素は「play」メソッドを持っており、これを実行すると音楽が流れます。

音楽再生の制御

もう一つやることがあります。現状だと、音楽を流している最中に他のボタンをクリックすると音楽が同時に流れてしまいます。

流れる音楽を常に一つの状態にしましょう。先ほど作成したクリックイベントに次の処理を加えます。

sounds.forEach(sound => {
  ...

  // clickイベントを登録
  btn.addEventListener('click', () => {
    // 音楽を止める
    stopSongs()
    // playで音楽が流せる
    document.getElementById(sound).play()
  })

   ...
})

function stopSongs() {
  sounds.forEach(sound => {
    const song = document.getElementById(sound)
    // 音楽を止める
    song.pause()
    // 最初に巻き戻す
    song.currentTime = 0;
  })
}

sounds.forEach(sound => {

...

// clickイベントを登録

btn.addEventListener('click', () => {

// 音楽を止める

stopSongs()

// playで音楽が流せる

document.getElementById(sound).play()

})

...

})

function stopSongs() {

sounds.forEach(sound => {

const song = document.getElementById(sound)

// 音楽を止める

song.pause()

// 最初に巻き戻す

song.currentTime = 0;

})

}

audio要素を取得したら「pause」メソッドで音楽が止められるようです。

また、「currentTime」プロパティは音楽再生時間を表していて、0秒に設定すると一番最初に巻き戻ります。

これでOKですね。

おわりに

audioタグは便利そうですね。あまり使ったことはなかったのですが、簡単なミニゲームを作る時に役立ちそうな気がします。

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 音源ボタンの元(これはbuttonのIDにもなっている)
const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']

// 音源ボタンを作成
sounds.forEach(sound => {
  // button要素を作成
  const btn = document.createElement('button')
  // btnクラスを追加
  btn.classList.add('btn')
  // buttonのラベルを設定
  btn.innerText = sound

  // clickイベントを登録
  btn.addEventListener('click', () => {
    // 音楽を止める
    stopSongs()
    // playで音楽が流せる
    document.getElementById(sound).play()
  })

  // buttonsIDの子要素としてbuttonを追加
  document.getElementById('buttons').appendChild(btn)
})

function stopSongs() {
  sounds.forEach(sound => {
    const song = document.getElementById(sound)
    // 音楽を止める
    song.pause()
    // 最初に巻き戻す
    song.currentTime = 0;
  })
}

// 音源ボタンの元(これはbuttonのIDにもなっている)

const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']

// 音源ボタンを作成

sounds.forEach(sound => {

// button要素を作成

const btn = document.createElement('button')

// btnクラスを追加

btn.classList.add('btn')

// buttonのラベルを設定

btn.innerText = sound

// clickイベントを登録

btn.addEventListener('click', () => {

// 音楽を止める

stopSongs()

// playで音楽が流せる

document.getElementById(sound).play()

})

// buttonsIDの子要素としてbuttonを追加

document.getElementById('buttons').appendChild(btn)

})

function stopSongs() {

sounds.forEach(sound => {

const song = document.getElementById(sound)

// 音楽を止める

song.pause()

// 最初に巻き戻す

song.currentTime = 0;

})

}

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

JavaScriptでaudioタグの音楽再生処理を実装しよう!

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

音源ボタンを作成する

クリックイベントの登録

音楽再生の制御

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

音源ボタンを作成する

クリックイベントの登録

音楽再生の制御

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Django管理機能(admin)まとめ

[Golang/Go言語]ファイル検索ツールを作って業務効率化を目指そう!

[React]~MovieApp1: ~画面遷移の実装をしよう!~

Django開発~ショッピングカート構築編5~ページネーションの導入

Go言語でtmuxを操作しよう

[golang]fiber API8~Admin: ModelのEmbedd…

Go言語とPostgreSQLで遊ぼう!~ Transaction編~

Go言語で作るMiddleWare(by REST API)

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル