ラジオ配信(Audio Player)のやり方 #VideoJS

streampack の田中です。

概要

弊社のサービスでは、オープンソースの　VideoJS を使っております。動画配信での実績はあったのですが、今回はラジオ配信をやるための方法になります。HTML5のプレイヤーだけでは、audioファイルはブラウザによってはサポートしていないため、様々なOSやブラウザでサポートしているAppleが提供しているHLS(HTTP Live Streaming)に変換し、VideoJS Playerを使ってやります。

その際の手順です。

変換ファイルの準備

今回は Amazon Elastic Transcoder を使います。FFmpeg や Bento4 を使っても可能です。

ローカルでやる際はこちら:
https://qiita.com/khagi/items/6e8c8d10c77bee53487b

基本的には、Audio HLSのプリセットを決め、ジョブを投げれば、s3上に変換ファイルが出力されます。
すでに、Audio HLSプリセットはあるため、デフォルトの System preset: HLS Audio - 160k を使います。

デフォルトのプリセット

ジョブの作成

Pipeline: 事前に準備が必要です。s3 bucket の入出力バケットなどを登録します。
Input Key: s3 に置いた Audioファイルを指定します。
Output key: は指定した Output key Prefix（hls/) に playlist.m3u8 という名前で出力されます。

プレイヤーの準備

下記を準備し、poster と source src(audioファイルのパス) を書き換えます。

player.html

<head>
    <title>Audio Player</title>
    <meta charset="UTF-8">
    <link href="//cdnjs.cloudflare.com/ajax/libs/video.js/5.19.1/video-js.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/video.js/5.19.1/video.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.5.0/videojs-contrib-hls.js"></script>
</head>

<body>
    <h1>Audio</h1>
    <audio id="content_video" class="video-js vjs-default-skin" width="640" height="360" preload="none" poster="//s3 domain/poster.jpg" playsinline controls>
        <source src="//s3 domain/hls/xxx.m3u8" type="application/x-mpegURL">
    </audio>
    <script>
      var player = videojs('content_video');
    </script>
</body>

posterにサムネイル画像をセットすることによって、プレイヤー上にポスターを表示したまま再生が可能です。

結論

HLSファイルとVideoJSを使えば、比較的に容易にラジオ配信が可能となります。
ぜひ、お試しあれ。