第13回　新入社員ブログ2020！

お久しぶりです。新入社員のUです。
来年には新人が入ってきて自分が先輩になるという事実（あたりめーだ）に最近震えております…

今回は、前回の新人ブログでAさんが書いてくれていた社内ラジオの開発について、私からも少し紹介したいと思います。
ざっくりとした紹介は前回Aさんが行ってくれていたので、今回私はどんな技術を使ったか、どこに苦労したかについて紹介したいと思います。けっこー大変だった…(;´∀｀)

ブラウザだけでリアルタイム通信

まずは、Webブラウザだけでラジオ（＝音声の配信）をしたかったので、それを実現するには何が必要かを調べました。
すると、どうやらWebRTCというブラウザでリアルタイム通信を実現する技術が必要で、そのためにはリアルタイム通信のためのサーバ（シグナリングサーバ）が必要だということが分かりました。

新入社員2人でサーバを構築するのは難しかったので、今回はWebRTCを提供してくれる既存のサービスを利用することにしました。
このサービスを利用してコードを色々と書いてみると、音声の配信をブラウザ上で確認することができました！

シグナリングサーバが必要で…サーバを構築して…でもやっぱりできなくて…という苦労がそれまであったので、ブラウザで音声を配信してそれを聞くという「初めの一歩」ができたときはとても嬉しかったです。

正直、（既存のサービスを利用していますが）自分たちでリアルタイム通信を実現することができただけでも、よくやったほうだと思いました。。。

音楽の挿入

ラジオといえば音楽を好きなタイミングで入れたりするやろ！ということで、効果音を入れたり、音楽をかけたりしたいと思いました。
音声と音楽を混ぜて配信するので、ミキシングと言うらしいのですが、これがなかなかできなかった…(泣)

ミキシングとか音楽の合成とかで調べると、JavaScriptのWeb Audio APIというものがよく出てきました。
ですが、これの使い方が分からず苦戦しました…

Web Audio APIの使い方がサイトに書かれていても、英語！あるいは英語を日本語訳した気持ち悪い日本語！ということで、全然分からん！（この時点で体が拒否反応）
そのため、Web Audio APIのライブラリを使おうと思い色々調べたのですが、ミキシングを実現できそうなものはなく使えませんでした。

結局、（かなり）遠回りしてWeb Audio APIをそのまま使ってミキシングを実現することができました。
Web Audio APIの使い方を理解することが一番の近道だったんだね！（最初からやっとけ）

詳しい使い方は割愛しますが、JavaScriptで音声や音楽をいじるという作業は今までやったことがなく、周りにもあまり触ったことがある方がおらず、実現するまで大変な道のりでした…（疲弊）

振り返って

ブラウザでラジオを作るにあたって技術的に苦戦したのは、上で紹介した2点でした。

シグナリングサーバに関しては、今回はサンプルの作成ということで、既存のサービスを利用しても問題ありませんでした。
しかし、今後本当に運用するとしたら、サーバ関係も自分たちで構築しなければなりません。
そのときはまた改めて勉強が必要かなと思います。

音楽の挿入に関しては、不思議なことに一度ミキシングを成功させることができると、そのほかの再生や停止、音量の調整や音声の加工など、様々なことができるようになりました。
「〇〇という方法で□□が実現できる」ということが想像できるようになったという方が近いかもしれません。
基礎の部分を理解したことで応用部分も想像がつくようになる、という経験をさせてもらいました。
0を1にすることが最も大変で、最も重要であるということが分かりました。

今回あまり触れていないですが、このサンプル作成はAさんと2人で行ったので、チームで協力して1つのものを作るという練習にもなりました。
何が必要か相談したり、役割分担したりすることは今後も重要になってくるので、とても良い経験になったと思います。

毎度のことですが、分からないことがあると（分からないことしかない）周りの先輩方、そして社長にも助けてもらいました。
感謝です。。。

今回はいっぱい書いてしまったような気がしますが、ここまで読んでくださりありがとうございました！

ウィズテクノロジーで一緒に働きませんか？
分野を限定せず幅広い事業を展開。新しい技術の導入にも積極的に取り組んでおり、チャレンジや成長する機会が沢山。
あなたの経験・知識を活かしながら一緒にIT業界を盛り上げて行きましょう！
採用情報詳細はコチラ