ElevenLabsのWebページに音声読み上げ機能を埋め込める Audio Nativeを試してみた

2026.05.18

どうも！オペ部の西村祐二です！
ブログ記事の音声化に使えるサービスとして、ElevenLabs の Audio Native が気になっていました。ローカル環境で動作確認しつつ、セットアップ手順や料金体系を整理してみたのでまとめます。
最初に、今回の検証で作成したデモページを提示します。ローカルに用意した日本語のテストページにAudio Native用のHTMLスニペットを貼り付けたところ、ElevenLabs側がテキストを抽出して音声を自動生成し、プレイヤーで再生できる状態になりました。
生成された日本語の読み上げ音声もかなり自然なものでした。

https://youtu.be/jq6TkppUlOU
上記の状態に至るまでの手順とハマりどころを整理していきます。
 Audio NativeとはAudio Native はElevenLabsが提供する、Webページの本文を自動で音声化して埋め込みプレイヤーで再生できる機能です。HTMLスニペットを記事に貼り付けるだけで、ElevenLabs側でテキスト抽出から音声生成までを行ってくれます。
ブログやニュースレターの音声化、アクセシビリティ向上、ながら聴き需要への対応などが主なユースケースとして紹介されています。
 試してみる 環境ElevenLabs Audio Native（2026年5月時点）
macOS
Chrome 最新版
cloudflared（HTTPSトンネル用）
 1. セットアップ手順公式ドキュメントをもとに、Audio Nativeを使い始める流れを整理すると次のとおりです。
ElevenLabsアカウントを作成し、サブスクリプションを契約する
サイドメニューの「More Tools」→「Audio Native」を開く
「Settings」タブで使用するVoiceとModel（Eleven v3、Multilingual v2、Flash v2.5など。提供モデルは時期により変動）を選ぶ
プレイヤーの背景色・テキスト色などを設定する
URL Allowlistに公開先のドメインまたはページURLを登録する
生成された埋め込みコードをコピーし、対象記事に貼り付ける
公開後、数分かけてテキストが音声に変換される


WordPressのように既存プラグイン（WPCodeなど）経由で「Insert Before Content」設定にしておくと、新規記事を公開するたびに自動でプレイヤーが挿入される運用ができそうです。
 2. ローカルで動作確認するときの注意URL AllowlistはHTTPS URLしか受け付けない仕様のため、http://localhost:3000 のようなURLを直接登録することはできませんでした。
そこで、Cloudflare Tunnel のアカウント不要なQuick Tunnel機能でローカルにHTTPS URLを生やして検証しました。
# 別ターミナルでローカルサーバを立てる
npx http-server -p 3000

# Cloudflare Tunnel で HTTPS URL を払い出す（アカウント不要）
cloudflared tunnel --url http://localhost:3000
# → https://xxxxxxxx.trycloudflare.com が払い出される
払い出されたHTTPS URLを登録してアクセスすると、先ほどのデモのとおりプレイヤーが正常に表示されます。アカウント不要で1コマンドで起動できるため、お試し用途には手軽でした。ngrokでも同じことができます。
なお、Quick Tunnelで払い出されるURLは起動するたびに変わるため、検証のたびにAllowlistを更新する必要があります。継続的に検証するなら、Cloudflareアカウントを作ってNamed Tunnelで固定URLにするか、ステージング用の独自ドメインを別途用意するのが楽そうです。
 3. 料金プランと利用条件を確認する料金ページ で2026年5月時点の主要プランを確認しました（USD建て）。


プラン
月額
月間クレジット
商用利用


Free
$0
10,000（約10分）
不可（非商用利用に限定）

Starter
$6
30,000
可

Creator
$22
121,000
可

Pro
$99
600,000
可

Scale
$299
1,800,000
可

Business
$990
6,000,000
可

ElevenLabsはクレジット制（公式では1クレジット ≒ 1文字を目安としているケースが多い）で、未使用分は有料サブスクリプションを継続している場合に限り最大2か月まで繰り越せます。ダウングレードや解約で失効する点には注意が必要そうです。
Audio Native自体が「どのプラン以上で使えるか」を明示する公式テキストはダッシュボード説明から読み取りづらかったため、最終的なプラン要件は公式ドキュメントと料金ページを参照するのが確実です。少なくとも、無料プランは非商用利用に限定されているため、公開ブログへの埋め込みでは有料プラン（Starter以上）が前提になります。
!料金やプラン要件はアップデートされる可能性が高いため、導入前に最新の公式ページで確認するのが確実です。
 4. Voice/Modelを切り替えるダッシュボードのSettingsタブから、使用するVoiceとModelを選択できます。設定を変更しても同じ埋め込みコードはそのままなのでコード側の更新の必要はありません。
デフォルトでは「Use default player settings」というチェック項目があり、有効になっているためOFFする必要があります。
When enabled, embedded players on these URLs will inherit the default player's styling and settings.
OFFにすることでモデルの設定や各種設定ができるようになります。

Voice/Modelを切り替えた際の注意点としては、すでに生成済みの音声は自動では差し替わりません。

Pagesに表示される対象のページで生成された項目を削除する必要があります。
 おまけ: 埋め込みコードの中身を覗くここからは「実際に使う」上では知らなくても問題ない部分ですが、埋め込みスクリプトの中身が気になったので調べた内容を補足としてまとめておきます。
公式の各プラットフォーム向けガイド（WordPress / Webflow / Ghost / Squarespace / Wix）で配布される埋め込みコードは、ほぼ次の形式です。
embed.html
<div id="elevenlabs-audionative-widget"
     data-height="90"
     data-width="100%"
     data-frameborder="no"
     data-scrolling="no"
     data-publicuserid="YOUR_PUBLIC_USER_ID"
     data-projectid="YOUR_PROJECT_ID">
</div>
<script src="https://elevenlabs.io/player/audioNativeHelper.js"
        type="text/javascript"></script>
スクリプトの中身をダウンロードして読んでみます。
curl -sL https://elevenlabs.io/player/audioNativeHelper.js -o audioNativeHelper.js
wc -c audioNativeHelper.js
#    3002 audioNativeHelper.js
3KB弱のシンプルなスクリプトで、やっていることは大きく次の3点でした。
#elevenlabs-audionative-widget というIDのdiv要素を探す
data-* 属性を読み取って iframe を組み立てる（width/height/frameBorder/scrollingはiframeの属性に、publicUserId/projectId/textColor/backgroundColor/small/qaはiframe srcのクエリパラメータに振り分ける。srcの起点は data-playerurl で指定可能で、既定値は https://elevenlabs.io/player）
元のdivをiframeに置換する
つまり、プレイヤー本体はElevenLabs側のホスト上で動くiframeで、埋め込み側はそれを呼び出すだけの薄いラッパーになっています。
スクリプトには window.addEventListener("message", ...) でiframeからのメッセージを受け取る処理もありました。audioNativeUrlRequest を受け取ると親ページの window.location.href とfavicon情報をiframeに返し、audioNativeHideRequest を受け取るとiframeの高さを 0 にする、という挙動が定義されています。
audioNativeHelper.js（要点を抜粋）
if (event.data === "audioNativeUrlRequest") {
  const frame = document.getElementById("AudioNativeElevenLabsPlayer");
  // ...
  const message = {
    id: "audioNativeUrlResponse",
    url: window.location.href,
    favicons: [...],
  };
  frame.contentWindow.postMessage(message, "*");
}

if (event.data === "audioNativeHideRequest") {
  const frame = document.getElementById("AudioNativeElevenLabsPlayer");
  frame.height = 0;
}
URL Allowlistの照合は、iframe側がpostMessageで親ページのURLを受け取り、ElevenLabs側で許可ドメインかを判定する流れで実装されているようです。許可されていないドメインで埋め込むと audioNativeHideRequest が送られてプレイヤーが自分自身を非表示にする、という挙動でした。実際、Allowlistに登録していない状態で埋め込みコードを置くと、iframeは生成されるもののheightが 0 で見えない状態になります。
埋め込みコード側のdivで指定できるカスタマイズ属性は次のとおりです。


属性（HTML上の記法）
用途


data-width / data-height
プレイヤーの幅・高さ

data-frameborder / data-scrolling
iframeの枠線・スクロール挙動

data-publicuserid
アカウントの公開ID（必須）

data-projectid
Audio NativeプロジェクトID

data-textcolor / data-backgroundcolor
テキスト色・背景色

data-small
コンパクト表示モード

data-playerurl
プレイヤー本体のURL（既定: https://elevenlabs.io/player）

data-qa
QA用フラグ（公式での詳細説明は見当たらず）

色はクエリパラメータでiframeに渡されるため、ダッシュボード側で設定した色をページ単位でオーバーライドできる実装になっていました。
 検証結果の考察埋め込み機構そのものは、divをiframeに置換するだけの軽量なラッパー実装でした。本体ロジックがElevenLabs側のiframeに集約されているため、サイト側のメンテナンスコストは小さく抑えられそうです。一方で、プレイヤーを動かすにはURL Allowlistの登録が必須です。ステージング環境やプレビュー用の独自ドメインがある場合は、それらも併せて登録しておく必要がありそうです。
ローカル検証でHTTPS必須という仕様にひっかかった点は、本番運用前のテスト環境設計に直結する話だと感じました。Cloudflare TunnelやngrokなどのHTTPSトンネルを使えば回避できますが、Quick Tunnel系はURLが毎回変わるためAllowlistの再登録が発生します。検証フローを継続的に回すなら、固定URLを払い出せる構成（Named Tunnel・ステージングドメイン）をあらかじめ用意しておくのが現実的そうです。
料金面では、無料プランの10,000クレジットは「約10分」相当とされています。日本語の技術記事1本あたりの文字数を5,000〜6,000文字とすると、月1〜2本で使い切ってしまう計算です。実運用ではCreatorプランの121,000クレジット（約2時間相当）以上が現実的なラインになりそうです。
 試してみた感想スクリプト1本とdiv要素1つを記事テンプレートに仕込めば、あとはダッシュボード側の設定だけで運用できる点は良いと感じました。プラットフォームによっては自動挿入機構と組み合わせれば、新規記事の音声化を運用フローに乗せやすそうです。
Voice/Modelの組み合わせは品質への影響が大きく、いくつか試した範囲では日本語対応のVoiceとEleven v3モデルの組み合わせでないと、カタコトになったり、話の間の取り方が不自然になったりする箇所が目立ちました。日本語コンテンツに使うなら、Voice Libraryから日本語ネイティブのVoiceを選び、モデルもEleven v3にしておくのが無難そうです。
日本語対応のVoiceとEleven v3モデルの組み合わせで試した範囲では、本文中に出てくる英語の技術用語もある程度自然に読み上げてくれた印象です。完全ではないものの、英単語のたびに違和感が出るというほどでもなく、テック系の本文には意外と耐えてくれそうな手応えがありました。
ただし、コードブロックやコマンドラインの読み上げをどう扱うかは別途確認が必要そうです。発音辞書（pronunciation dictionary）が公式に用意されており、固有名詞や略語の読みを矯正する余地はあるので、本格運用するなら実コンテンツで読み上げ品質を見つつ、辞書側のチューニングも併用していくのが良さそうです。
 まとめElevenLabs Audio Nativeを、ローカル環境での動作確認とセットアップ手順・料金体系を中心に確認してみました。
埋め込みは軽量なスクリプトとdiv要素1つだけのシンプルな構成
ダッシュボードでVoice/Modelを切り替えれば、同じ埋め込みコードのまま再生音声を差し替えられる
URL AllowlistはHTTPS URLのみ受付。ローカル検証はCloudflare Tunnel等のHTTPSトンネル経由で行う
無料プランは非商用利用に限定されるため、ブログへの実運用ではStarter以上が前提（音声生成量を考えるとCreator $22あたりが現実的）
埋め込みの仕組みは理解できました。次は発音辞書の挙動やカスタマイズ性について確かめたいところです。
誰かの参考になれば幸いです。
参考リンク:
ElevenLabs Audio Native 公式ドキュメント
ElevenLabs 料金ページ
Audio Native with WordPress
Audio Native with React
Update Audio Native Content From URL（API）
Cloudflare Tunnel - Quick Tunnels

ElevenLabsのWebページに音声読み上げ機能を埋め込める Audio Nativeを試してみた

Audio Nativeとは

試してみる

環境

1. セットアップ手順

2. ローカルで動作確認するときの注意

3. 料金プランと利用条件を確認する

4. Voice/Modelを切り替える

おまけ: 埋め込みコードの中身を覗く

検証結果の考察

試してみた感想

まとめ

関連記事

AWSで探す

注目のテーマ

プロダクトやサービスで探す

特集やシリーズから探す

EVENTS

プラン	月額	月間クレジット	商用利用
Free	$0	10,000（約10分）	不可（非商用利用に限定）
Starter	$6	30,000	可
Creator	$22	121,000	可
Pro	$99	600,000	可
Scale	$299	1,800,000	可
Business	$990	6,000,000	可

属性（HTML上の記法）	用途
`data-width` / `data-height`	プレイヤーの幅・高さ
`data-frameborder` / `data-scrolling`	iframeの枠線・スクロール挙動
`data-publicuserid`	アカウントの公開ID（必須）
`data-projectid`	Audio NativeプロジェクトID
`data-textcolor` / `data-backgroundcolor`	テキスト色・背景色
`data-small`	コンパクト表示モード
`data-playerurl`	プレイヤー本体のURL（既定: `https://elevenlabs.io/player`）
`data-qa`	QA用フラグ（公式での詳細説明は見当たらず）