ヴォイスチェンジャーを使って匿名で音声を投稿するWebサービスをつくりました

tl; dr

nanimonoca - 匿名音声投稿サービス

表題の通り、「nanimonoca」というWebサービスをローンチしました。経緯としては、今年の一月に「他人のプロフィールを勝手に編集できるプロフィールサイト」をつくったところ思いの外好評で、これに味をしめて大学の夏休みでまたWebサービスをつくろうという気持ちになったというところです。

e-ntyo.hatenablog.com

はてなにも匿名日記サービスがありますが、あれ以上に面白いコンテンツが投稿される場所になってほしいと切に願っております。ぜひぜひご利用くださいませ。

つかいかた

音声を録音・再生するサービスなのでイヤホンを使用することを強くおすすめします。 また、当然マイクのないデバイスでは録音機能が利用できません。それとiOSでは色々あってまだ録音機能が使えません…ごめんなさい。

https://nanimonoca.online/post にアクセスすると、まずマイクの使用を許可するように要求されるので許可してください。トップページから画面右上の「投稿画面」をクリックして遷移することもできます。

f:id:E_ntyo:20191011102218p:plain
許可しないとトップページに遷移します

f:id:E_ntyo:20191011102513p:plain
許可するとこういう画面が表示されます

この時点で自分の声がヒストグラムで可視化されます。マイクの入力が大きすぎたら、シークバーを動かして音量を調整してあげてください(入力の音が大きすぎると音が割れてしまいます)。ヴォイスチェンジャーをクリックすると、声が高くなってテレビ東京の警察24時に出てくる悪い人みたいな声になることができます。「録音開始」をクリックすると録音が開始されますが、 録音された声はこの時点ではインターネット上に公開されません ので安心してください。録音に失敗しても録り直すことができますし、気が変わってやっぱり投稿しないということも出来ます。

f:id:E_ntyo:20191011103144p:plain
録音が完了するとこの画面が表示されます

録音を終えたら、最初から音声を再生して確認することができます。このとき、波形の任意の場所をクリックすると音声を途中から再生することができます。内容に問題があれば「録り直す」ボタンを押して録り直すことができます。問題がなければ、タイトルと説明文を設定して投稿します。このタイトルと説明文は、SNS上でシェアされた時の見え方にも影響します。

f:id:E_ntyo:20191011103705p:plainf:id:E_ntyo:20191011103702p:plain
投稿のタイトル・説明文はTwitterでシェアされた時に展開されます

また、投稿時にサインイン(現在はTwitter連携による認証にのみ対応しています)して投稿することで、自分の投稿に新着コメントがついたときに通知を受け取ったり、過去の投稿一覧を管理したりすることができます。他の人の投稿をお気に入りして管理することもできます。適時利用してください。

f:id:E_ntyo:20191011104642p:plain
サインインするとこういう画面が使えるようになります

以上が使い方になります。時間に余裕があればサイト上にもまとめようと思います。質問があればこちらのコメント欄か https://twitter.com/e_ntyoまでお願いいたします。

[プログラマの方へ] 実装についての質問を募集しています

このサービスはFirebaseで実装しています。ココはどうやって作ったの?とか興味があることがあればぜひ気軽にご質問ください(このブログのコメント欄でもTwitterでも結構です)。例えば、

  • 波形データをmpeg形式に圧縮するのってどうやってブラウザ上で実装したの?

  • ヴォイスチェンジャーってどう実装したの?

  • Twitter for Webで投稿のURLをツイートしたらTL上で動画として再生できるみたいだけれど、これってどう実装したの?

などなど。ドヤ顔で「それはねっ…!」とお答えしたいと思います。

また、逆に皆さんからサービスに対するアドバイスももらいたいと思っています。

こういうのを求めています。よろしくお願いします。