ITメモ
Make SiteMap HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
【HTML】HTMLメールの作り方【HTML】ブラウザやタブに表示される小さなアイコン「favicon(ファビコン)」の作り方【HTML】HTMLタグに「マウスアクション」を指定する方法【XML】サイトマップ作り方
「HTML」の基礎知識
【HTML】「HTML」の書式【HTML】「HTML」でのコメントの仕方【HTML】「CSS」の使い方【HTML】「Javascript」の使い方【HTML】「ブロック要素」と「インライン要素」【HTML】「HTML」の特殊文字一覧【HTML】ヘッダー部分の編集方法【HTML】他のページに移行する「リンク」の作り方 【HTML】表の作り方【HTML】Webページに画像の埋め込む方法【HTML】動画を埋め込む方法【HTML】音声ファイルを埋め込む方法【HTML】地図を埋め込む方法【HTML】入力フォームの作り方
「HTML」タグ
【HTML】「a」タグ - リンクの作り方【HTML】「link」タグ - 別ファイルを関係定義・読み込みをする【HTML】「h1-h6」 - Webページの見出しの設定方法【HTML】ruby - 「ルビ」をふるための要素
SEO(Search Engine Optimization)
【SEO対策】SEOとは【SEO対策】アクセスアップするコーディング【SEO対策】検索エンジンに登録する方法
SEOの基礎
【SEO対策】「ページタイトル」 -- タイトル適切なページタイトルを付ける
サイト構造の改善
コンテンツの最適化
クローラーへの対処
モバイルSEO
プロモーションと分析





【HTML & CSS】音声ファイルを埋め込む方法












「audio」タグの使い方


オーディオファイルを再生するタグ
  • audio


asideタグの記述例:
<audio src="オーディオファイルパス" autoplay loop>
<p>このブラウザは、 audioに未対応のため再生が出来ません。</p>
</audio>



【audioタグの属性】意味使用可能タグ
autoplay自動的に再生を開始します。[audio]
controlsコントローラを表示します。[audio]
loopループ再生します。[audio]
mediagroup=name複数のメディアリソースをグルーピングする際のグループ名を指定します。[audio]
preload=value ページ表示時にメディアリソースを事前ロードするか指定します。指定に従うかどうかはブラウザの実装にまかされます。
auto:事前ロードする
none:事前ロードしない
metadata:メタデータのみを事前ロードする
autoplayが指定された場合は無視されます。
[audio]
muted音をミュートします。[audio]
src=urlメディアリソースのURLを指定します。[audio]
crossorigin=state CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
anonymous:認証情報を使用しない
use-credintials:認証情報を使用する
[audio]


Back



オーディオ関連のCSS設定


属性名説明
volume: volume 音量を指定。
0~100 までの数値
120% のようなパーセント指定
silent(無音)
x-soft(レベル 0)
soft(レベル 25)
medium(既定値:レベル 50)
loud(レベル 75)
x-loud(レベル 100)
inherit(継承)
voice-volume: volume 音量を指定。
silent(無音)
x-soft(レベル 0)
soft(レベル 25)
medium(既定値:レベル 50)
loud(レベル 75)
x-loud(レベル 100)
inherit(継承)
デシベル値(dB)
loud -6dB=loud よりも 6DB だけ小さな音
speak: speak 音声ユーザエージェントでの読み上げ方法を指定。
none(読まない)
normal(既定値:通常)
spell-out(テキストのスペルを 1文字ずつ)
inherit(継承)
pause: brefore after 音声ユーザエージェントで読み上げる際の間を指定。
pause-before は要素を読む前の間。
pause-after は要素を読む後の間。
pause は両方の間。

pause の引数がひとつの時は前後の間を指定。
1s(1秒)
100ms(100ミリ秒)
100%(平均的な 1単語に要する時間)
inherit(継承)
pause-before: time
pause-after: time
cue: brefore after 要素の前後で読み上げる音声を指定。
url(sound.wav) のような URL
none(読み上げない)
inherit(継承)
cue は両方の音声を一度に指定。
cue の引数がひとつの時は、前後の音声を指定。
cue-after: sound
cue-before: sound
play-during: sound mix repeat 背景音を url(back.wav)で指定。
mix(親要素の背景音はそのままで音を重ねる)
repeat(背景音を繰り返す)
auto(既定値:自動)
none(背景音無し)
inherit(継承)
azimuth: angle 音源の水平方向を -360deg~360deg の角度で指定。
left-side(-90deg)
far-left(-60deg)
left(-40deg)
center-left(-20deg)
center(既定値:0deg)
center-right(20deg)
right(40deg)
far-right(60deg)
right-side(90deg)
leftward(現在より反時計回りに 20deg)
rightward(現在より時計回りに 20deg)
inherit(継承)
elevation: angle azimuth: が水平方向の角度
elevation: は垂直方向の角度
-90deg~90deg の角度指定
below(-90deg)
level(0deg)
above(90deg)
higher(現在より+10deg)
lower(現在より-10deg)
inherit(継承)
speech-rate: rate 読み上げるスピードを指定。
180(1分間に約180語)のような数値
x-slow(80語)
slow(120語)
medium(180~200語)
fast(300語)
x-fast(500語)
faster(現在より+40語)
slower(現在より-40語)
inherit(継承)
voice-family: voice, voice, ... 声の候補を指定。
male(男性)
female(女性)
child(子供)の他
pitch: patch 声のピッチを指定。
120Hz や 1kHz のような数値指定
x-low(低い)
low(低め)
medium(普通)
high(高め)
x-high(高い)
inherit(継承)
pitch-range: range 声の抑揚を指定。
stress: はアクセント部分の抑揚。
richness: は声の通りやすさを 0~100 までの数値
inherit(継承)
stress: stress
richness: richness
speak-punctuation: mode セミコロンなどの区切り文字の読み方。
code(文字通り発音する)
none(区切りは入れるが発音しない)
inherit(継承)
speak-numeral: mode 数字の読み方を指定。
digits(イチ・ニィ・サンのように)
continuous(ヒャクニジュウサンのように)
inherit(継承)
speak-header: mode テーブル セル 読み上げ時にヘッダ情報を読むかを指定。
once(既定値:同じヘッダを参照する一連のセルの前で一度だけ読む)
always(すべての関連セルの前で読む)
inherit(継承)



記述例:

volume: loud;
voice-volume: loud;
speak: spell-out;
pause-before: 5s;
cue: url(in.wav) url(out.wav);
url(happy.wav) mix repeat;
azimuth: far-right;
azimuth: far-left behind;
elevation: abobe;
speech-rate: x-fast;
voice-family: comedian, male;
pitch: low;
pitch-range: 65; stress: 70; richness: 75;
speak-punctuation: code;
speak-numeral: digits;
speak-header: always;


Back