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ファイルのパス) を書き換えます。
<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を使えば、比較的に容易にラジオ配信が可能となります。
ぜひ、お試しあれ。