[JavaScript] ブラウザで音源を再生する

JavaScript, vue.js, 開発javascript, ブラウザ, 音楽再生

広告

ブラウザで音源を再生する方法

ブラウザで音源を再生する方法がいくつかあります。一つが、HTML5から追加された要素のAudio要素になります。こちらは、簡単にsrcにパスやURLを指定することで簡単に再生をすることができます。また、シンプルなUIが用意されていて再生や再生位置の調整も簡単に行うことができます。
もう一つはWeb Audio APIというものです。こちらは、音声信号を扱い加工やフィルタをかけることができます。オーディオデータをArrayBufferとして取得することで再生をすることができます。バイナリで扱うため最低限のデータで扱うことが出来ることも特徴の一つとなっています。

今回はAudioタグを使って再生する方法を紹介します。

上にあるようにAudioタグで再生することはとてもシンプルです。<audio src ="music.mp3 controls"/>のように書くことで再生するためのUIが表示されます。

UIを自分で作りたい・再生のコントロールを行いたい

再生のUIもシンプルであるため、自分でカスタマイズしたいことや再生機能を充実させたいことなどがあると思います。

JavaScriptを使って音源の再生をする

JavaScriptにも音源を扱うオブジェクトが用意されています。Audioオブジェクトというものがあります。こちらのオブジェクトは、プロパティや関数も充実しており、再生位置や音量などの様々な情報を取得することができます。

AudioタグとAudioオブジェクトは同じ？

ブラウザの開発ツールを使って、Audioオブジェクトをconsole.logで出力してみました。出力結果は<audio preload="auto"></audio> となっていました。なんと、audioタグが出力されていました。

Audioオブジェクト

代表的なプロパティ

  • src 音源のパスやURL
  • volume 音量 (0~1)
  • currentTime 再生位置
  • duration 再生時間

代表的な関数

  • play()
  • pause()

代表的なイベント

  • timeupdate : 現在の再生時間が更新されたタイミングで発火
  • canplay 十分に再生可能な時間読み込みができた時に発火

vue.jsで再生のサンプルを作ってみた

<template>
    <div id="player">
        <div id="play" v-if="isPlay == false"
            @click="play()">再生
        </div>
        <div id="stop" v-else
            @click="stop()">停止
        </div>
        <div id="status">
            {{currentTime}}/{{duration}}
        </div>
    </div>
</template>

<script>
export default {
    name: 'player',
    props: {
        src: String
    },
    data: function () {
        return {
            audio: new Audio(),
            isPlay: false,
            duration: 0,
            currentTime: 0
        }
    },
    mounted: function () {
        this.audio.src = this.src;
        this.audio.load();
        this.audio.addEventListener('canplay', () => {
            this.duration = this.audio.duration;
        });
        this.audio.addEventListener('timeupdate', () => {
            this.currentTime = this.audio.currentTime;
        });
    },
    methods: {
        play: function () {
            this.audio.play();
            this.isPlay = true;
        },
        stop: function () {
            this.audio.pause();
            this.isPlay = false;
        }
    }
}
</script>

<style scoped>
</style>

広告

JavaScript, vue.js, 開発javascript, ブラウザ, 音楽再生