【JavaScript】audioオブジェクトとは？用途・使用方法を解説！

皆さんは「audioオブジェクト」と聞くと何を思い浮かべますか？少し思い浮かべてみてください。

恐らく「audio（オーディオ）」という言葉から音楽や音声といったものを思い浮かべたかと思います。

その通り、audioオブジェクトとは音声を扱うオブジェクトです。

しかし、音声を扱うオブジェクトと聞いても

・どうやって使えばいいんだろう？

・具体的にはどういうことができるんだろう？

・audio要素との違いは…

といった疑問を持つ方もいるでしょう。

さて、今回はそんなaudioオブジェクトについて、用途や使用方法を詳しく紹介していきます！

audioオブジェクトとは

audioオブジェクトについて先程少しだけ説明いたしましたが、まだどういったものかは詳しくご理解いただけていないかと思います。

ここではaudioオブジェクトについて詳しく説明していきます。

audioオブジェクトは音声ファイルを扱うオブジェクト

先程、audioオブジェクトは音声を扱うオブジェクトと説明いたしました。

では具体的にどういったファイルを扱えるのでしょうか。

audioオブジェクトでは以下のファイルを扱うことができます。

・mp3ファイル（.mp3）

・mp4ファイル（.mp4）

・WAVEファイル（.wav）

・flacファイル（.flac）

・m4aファイル（.m4a）

このように多くのファイルを扱うことができますが、一部扱うことのできないファイルもありますので、もしそういったファイルがあった場合は上記のファイルに変換していただければ使うことができます。

audio要素との違いは？

ここではaudioオブジェクトとaudio要素の違いを説明していきます。

audioオブジェクトはJavaScriptで音声ファイルを扱う際に使用するオブジェクトです。

ではaudio要素とは何でしょうか。

audio要素とはHTML5で音声ファイルを扱う際に使用されるものです。

audioオブジェクトとは、HTML5で使われるaudio要素を扱うものですので、audio要素についても理解を深めていただけますと上手く使いこなすことができるかと思います。

audioオブジェクトのメソッド、プロパティの種類

audioオブジェクトにはメソッドとプロパティというものがあり、audioオブジェクトとメソッド、プロパティはセットで使われることになります。

ここではそのメソッドとプロパティの種類について説明していきます。

audioオブジェクトのメソッドは下記の2種類、プロパティは下記の9種類があります。

〇メソッド

・playメソッド

・pauseメソッド

〇プロパティ

・srcプロパティ

・loopプロパティ

・autoplayプロパティ

・currentTimeプロパティ

・endedプロパティ

・mutedプロパティ

・volumeプロパティ

・defaultMutedプロパティ

・controlsプロパティ

以上がaudioオブジェクトにおけるメソッドとプロパティです。

メソッドとプロパティの詳しい使い方については次の項で説明していきます。

audioオブジェクトの基本的な使い方

前項ではaudioオブジェクトについてざっくりと説明してきました。

この項ではaudioオブジェクトの詳しい使い方について説明していきます。

audioオブジェクトの使い方

先程、audioオブジェクトはメソッドやプロパティとセットで使われると説明いたしました。

audioオブジェクトは主に下記の形で使われます。

var 変数 = new Audio();
変数.メソッドorプロパティ;

1 2	var 変数 = new Audio(); 変数.メソッドorプロパティ;

この形は基本となりますので、ぜひ覚えておいてください。

playメソッド

playメソッドは

音声ファイルを再生する

メソッドです。

下記のように記述することで、指定した音声ファイルが再生されます。

music.play();

1	music.play();

pauseメソッド

pauseメソッドは

音声ファイルを一時停止する

メソッドです。

下記のように記述することで、指定した音声ファイルの再生を一時停止することができます。

music.pause();

1	music.pause();

srcプロパティ

srcプロパティは

使用する音声ファイルとその場所を指定する

プロパティです。

下記のように記述することで、使用したい音声ファイルの場所を指定することができます。

var music = new Audio();
music.src = "音声ファイルの場所";

1 2	var music = new Audio(); music.src = "音声ファイルの場所";

ここで注意していただきたいのが、ファイルの場所はダブルクォーテーションで囲むということです。

ダブルクォーテーションで囲むことを忘れてしまうとエラーとなっていしまいますのでご注意ください。

また、srcプロパティを使う以外にも音声ファイルの場所を指定する方法はありますので紹介いたします。

下記のように、変数を作る際に音声ファイルの場所を指定することもできますので覚えておくと良いでしょう。

var music = new Audio("音声ファイルの場所");

1	var music = new Audio("音声ファイルの場所");

変数を作る際に指定する場合でもダブルクォーテーションが必要になりますのでご注意ください。

loopプロパティ

loopプロパティは

音声ファイルを繰り返し再生する

プロパティです。

下記のように記述することで、繰り返し再生をするかどうかの値を格納することができます。

music.loop = true or false;

1	music.loop = true or false;

loopの値がtrueの場合は指定した音声ファイルが繰り返し再生されます。

loopの値がfalseの場合、繰り返し再生はされません。

また、loopプロパティは下記のように記述することで現在の値を取得し、指定した変数にloopの値を格納することもできます。

var 変数 = music.loop;

1	var 変数 = music.loop;

音声ファイルが繰り返し再生される設定だった場合はtrue、繰り返し再生されない場合はfalseが格納されます。

autoplayプロパティ

autoplayプロパティは

音声ファイルを自動再生する

プロパティです。

下記のように記述することで、自動再生するかどうかの値を格納することができます。

music.autoplay = true or false;

1	music.autoplay = true or false;

autoplayの値がtrueの場合、音声ファイルが自動再生されます。

autoplayの値がfalseの場合、自動再生はされません。

また、autoplayプロパティは下記のように記述することで現在の値を取得し、指定した変数にautoplayの値を格納することもできます。

var 変数 = music.autoplay;

1	var 変数 = music.autoplay;

音声ファイルが自動再生される設定だった場合はtrue、自動再生されない場合はfalseが格納されます。

currentTimeプロパティ

currentTimeプロパティは

音声ファイルの再生位置を設定する

プロパティです。

下記のように記述することで、再生位置の値を格納することができます。

music.currentTime = 再生位置;

1	music.currentTime = 再生位置;

再生位置は秒単位で指定することができます。

また、currentTimeプロパティは下記のように記述することで現在の値を取得し、指定した変数にcurrentTimeの値を格納することもできます。

var 変数 = music.currentTime;

1	var 変数 = music.currentTime;

endedプロパティ

endedプロパティは

音声ファイルの再生が終了したかどうかを取得する

プロパティです。

下記のように記述することで、音声ファイルの再生が終了したかどうかの値を取得し、指定した変数に格納することができます。

var 変数 = music.ended;

1	var 変数 = music.ended;

音声ファイルが再生終了している場合はtrue、再生前もしくは再生中の場合はfalseが格納されます。

mutedプロパティ

mutedプロパティは

音声ファイルをミュート（消音）するかどうかを指定する

プロパティです。

下記のように記述することで、音声ファイルをミュートするかどうかの値を格納することができます。

music.muted = true or false;

1	music.muted = true or false;

mutedの値がtrueの場合、音声がミュートになります。

mutedの値がfalseの場合、音声はミュートになりません。

また、mutedプロパティは下記のように記述することで現在の値を取得し、指定した変数にmutedの値を格納することもできます。

var 変数 = music.muted;

1	var 変数 = music.muted;

音声がミュートの場合はtrue、ミュートでない場合はfalseが格納されます。

volumeプロパティ

volumeプロパティは

音声ファイルの音量を設定する

プロパティです。

下記のように記述することで、音声ファイルの音量を設定することができます。

music.volume = 音量;

1	music.volume = 音量;

音量は0.0（最小）から1.0（最大）の間で指定します。

また、volumeプロパティは下記のように記述することで現在の値を取得し、指定した変数にvolumeの値を格納することもできます。

var 変数 = music.volume;

1	var 変数 = music.volume;

defaultMutedプロパティ

defaultMutedプロパティは

音声ファイルの初期設定の音量がミュートかどうかを取得する

プロパティです。

下記のように記述することで、指定した変数にdefaultMutedの値を格納することができます。

var 変数 = music.defaultMuted;

1	var 変数 = music.defaultMuted;

初期設定の音量がミュートだった場合はtrue、ミュートでない場合はfalseが格納されます。

controlsプロパティ

controlsプロパティは

ユーザーインターフェース（再生ボタン、音量調整バーなど）を表示するかどうかを指定する

プロパティです。

下記のように記述することで、ユーザーインターフェースの表示をするかどうかの値を格納することができます。

music.controls = true or false;

1	music.controls = true or false;

controlsの値がtrueの場合、ユーザーインターフェースが表示され、falseの場合、ユーザーインターフェースは表示されません。

また、controlsプロパティは下記のように記述することで現在の値を取得し、指定した変数にcontrolsの値を格納することもできます。

var 変数 = music.controls;

1	var 変数 = music.controls;

ユーザーインターフェースが表示される設定の場合はtrue、ユーザーインターフェースが表示されない設定の場合はfalseが格納されます。

サンプルコード

サンプルコード1

音声ファイルの再生や停止、音量の設定を行うサンプルコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
 
    <div>
        <button onclick="stop()">停止</button>
        <button onclick="play()">再生</button>
        <button onclick="loop_true()">ループ再生ON</button>
        <button onclick="loop_false()">ループ再生OFF</button>
        <button onclick="currentTime_start()">最初へ</button>
        <button onclick="ended()">再生終了確認</button>
    </div>
 
    <div>
        <button onclick="volume_down()">-</button>
        <button onclick="volume_up()">+</button>
        <button onclick="mute_true()">消音</button>
        <button onclick="mute_false()">消音解除</button>
    </div>
 
    <script language="javascript" type="text/javascript">
        var music = new Audio(); //変数作成
        
        music.src = "./music.mp3"; //音声ファイル指定
        music.volume = 0.5; //音量の初期値(50%)
        
        function play() { //再生
        music.play();
        }
        
        function stop() { //一時停止
            music.pause();
        }
        
        function volume_down() { //音量ダウン
            music.volume = music.volume - 0.1; //音量の値を0.1(10%)ずつダウン
        }
        
        function volume_up() { //音量アップ
            music.volume = music.volume + 0.1; //音量の値を0.1(10%)ずつアップ
        }
        
        function mute_true() { //消音
            music.muted = true;
        }
        
        function mute_false() { //消音解除
            music.muted = false;
        }
        
        function loop_true() { //ループ再生ON
            music.loop = true;
        }
        
        function loop_false(){ //ループ再生OFF
            music.loop = false;
        }
        
        function currentTime_start(){ //初期位置(0秒)へ移動
            music.currentTime = 0;
        }
        
        function ended(){ //再生終了しているか
            if(music.ended){
                alert("再生終了しています");
            }else{
                alert("再生前、もしくは再生中です");
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<button onclick="loop_true()">ループ再生ON</button>

<button onclick="loop_false()">ループ再生OFF</button>

<button onclick="ended()">再生終了確認</button>

</div>

<div>

</div>

var music = new Audio(); //変数作成

music.src = "./music.mp3"; //音声ファイル指定

music.volume = 0.5; //音量の初期値(50%)

function play() { //再生

music.play();

}

function stop() { //一時停止

music.pause();

}

function volume_down() { //音量ダウン

music.volume = music.volume - 0.1; //音量の値を0.1(10%)ずつダウン

}

function volume_up() { //音量アップ

music.volume = music.volume + 0.1; //音量の値を0.1(10%)ずつアップ

}

function mute_true() { //消音

music.muted = true;

}

function mute_false() { //消音解除

music.muted = false;

}

function loop_true() { //ループ再生ON

music.loop = true;

}

function loop_false(){ //ループ再生OFF

music.loop = false;

}

function currentTime_start(){ //初期位置(0秒)へ移動

music.currentTime = 0;

}

function ended(){ //再生終了しているか

if(music.ended){

alert("再生終了しています");

}else{

alert("再生前、もしくは再生中です");

}

</script>

</body>

</html>

このコードは音声ファイルの指定（./music.mp3）を変えればそのまま使用することができますので、ぜひ使用してみてください。

サンプルコード2

audio要素をJavaScript内で取得・操作するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
    <audio src="./music.mp3" id="music" controls muted>
    </audio>

    <div>
        <button onclick="defaultMuted()">初期音量</button>
        <button onclick="controls_true()">UI表示</button>
        <button onclick="controls_false()">UI非表示</button>
    </div>
 
    <script language="javascript" type="text/javascript">
        var music = document.getElementById("music"); //audio要素とIDから紐づけ
        music.volume = 0.5; //音量の初期値(50%)
        
        function defaultMuted() { //初期音量の確認
            if(music.defaultMuted){
                alert("初期音量はミュートです"); //audio要素でmuted属性を付与しているため基本はこっち
            }else{
                alert("初期音量はミュートではありません"); //audio要素のmuted属性を外すとこっち
            }
        }
        
        function controls_true() { //UI表示
            music.controls = true;
        }
        
        function controls_false() { //UI非表示
            music.controls = false;
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</audio>

<div>

<button onclick="controls_false()">UI非表示</button>

</div>

var music = document.getElementById("music"); //audio要素とIDから紐づけ

music.volume = 0.5; //音量の初期値(50%)

function defaultMuted() { //初期音量の確認

if(music.defaultMuted){

alert("初期音量はミュートです"); //audio要素でmuted属性を付与しているため基本はこっち

}else{

alert("初期音量はミュートではありません"); //audio要素のmuted属性を外すとこっち

}

function controls_true() { //UI表示

music.controls = true;

}

function controls_false() { //UI非表示

music.controls = false;

}

</script>

</body>

</html>

audio要素をJavaScript内で扱うためにはaudio要素をJavaScriptにて取得する必要があります。

そのためのコードが下記の部分です。

HTML
<audio src="./music.mp3" id="music" controls muted>
</audio>

HTML

</audio>

JavaScript
var music = document.getElementById("music"); //()内がHTML内で指定したID

1 2	JavaScript var music = document.getElementById("music"); //()内がHTML内で指定したID

また、audio要素でcontrols属性とmuted属性を付与しているため、初期状態ではユーザーインターフェースが表示され、音量がミュートされています。

ぜひ属性を追加したり削除したりして初期状態を確認してみてください。

まとめ

さて、今回はJavaScriptのaudioオブジェクトについて解説してきましたが、いかがでしたか？

これでJavaScriptでも音声ファイルを扱うことができます。

JavaScriptで音声ファイルを扱う機会があった際には、ぜひともこの記事を参考にしてくださいね。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。