JavaScriptによる音楽再生ソフトの作成を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptによる音楽再生ソフトの作成について現役エンジニアが解説しています。HTML5から導入されたAudioオブジェクトを利用すると音楽を再生することが可能です。音楽再生ソフトの再生・一時停止・停止方法などについて解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptによる音楽再生ソフトの作成について、TechAcademyの現役エンジニアが実際のコードを使って初心者向けに解説します。

JavaScriptについてよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回はJavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptによる音楽再生ソフトの作成について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptで音楽(トラック)を再生する方法

動画や音声を扱うインターフェース(機能の呼び名や形を決める外装のようなもの)を派生させたAudioオブジェクトを生成することでAudioの各種機能を使用することが可能です。

 

Audioオブジェクトを活用したコードは以下のようになります。

Audioオブジェクトを生成するJavaScript

var audio = new Audio();

再生や停止など提供されている機能は、インターフェースであるHTMLMediaElementを参照してください。

HTMLMediaElementのリファレンス

 

JavaScriptで音楽再生ソフトを作成してみよう

画面に「再生」や「停止」のボタンを表示させることが可能です。

JavaScriptで押されたボタンに合わせて生成したAudioの機能を呼び出すことで動作します。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptで音楽再生しよう

シンプルに再生ボタンと停止ボタンだけの画面を用意するコードです。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>
      <button onclick="play();">再生</button>
      <button onclick="pause();">一時停止</button>
    </p>
  </body>
</html>

 

JavaScript

var audio = new Audio(); 
audio.src = '【音声ファイルのURL】';

function play() {
  audio.play();
}
function pause() {
  audio.pause();
}

 

解説

画面(HTMLソース)の再生ボタンと一時停止ボタンに「onclick=”【JavaScriptの関数名()】”」と記述することでクリックした時に対応する処理を呼び出します。

Audioオブジェクトを生成した後で「audio.src = ‘【音声ファイルのURL】’」と記述することで操作する音声ファイルを指定します。

play関数の中では「audio.play()」と表記し、Audioオブジェクトのplay、再生機能を呼び出すものです。

pause関数の中では「audio.pause()」と表記し、Audioオブジェクトのpause、一時停止機能を呼び出すものです。

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptによる音楽再生ソフトの作成方法が分かりやすくて良かったです!

田島悠介

今後、ゆかりちゃんも分からないことがどんどんあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。