blog-RuinDig

短かったり長かったりする。Articles are my own.

Otterの埋め込みコードの取得方法

Otter(オッター)は英語の音声認識書き起こしツールとして知られている。

otter.ai

フリージャーナリストの西田宗千佳さんがTwitterや記事で紹介している。

www.watch.impress.co.jp

過去には動画の書き起こしのために使っていた。

最近になって、Otterの書き起こしの内容はHTMLコードを使って埋め込める事を知った。

Otterのコメント機能のリリース発表時のページの1番下で埋め込まれているのが確認できる。

blog.otter.ai

埋め込みコードの形式は以下のページで確認できる。

otter.ai

コードは以下の通り。高さを自由に変えられるようになっている。

<iframe style="box-shadow: -1px 3px 28px -4px rgba(0,0,0,0.76);" src="Otter上の個別の書き起こしデータのURL" width="100%" height="600px" frameborder="0"></iframe>

例えば、このOtterでの書き起こしデータの場合、

otter.ai

埋め込むと以下のようになる。

※このOtterの書き起こしデータは全く直していないので、書き起こしの完成版については以下を参照。

ruindig.hatenablog.jp

埋め込みコードは現状、使い方ガイドのページに載っているだけで、

otter.ai

f:id:edgeknight:20200407161549p:plain

f:id:edgeknight:20200407161617p:plain

Shareボタンやエクスポート関連のメニューには載っていない。そのため、埋め込みコード発行のメニューを作って欲しいと「Contact Support」のフォームからフィードバックを送った。

f:id:edgeknight:20200407161951p:plain

f:id:edgeknight:20200407164334j:plain

-end-