ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs（Mozilla）「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ（空白）」を表示する方法【XML】サイトマップ作り方「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト（箇条書き）で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素SEO（Search Engine Optimization）
「SEO対策」の具体的な方法「検索エンジン」に登録する方法「SEO対策」に有効な「ページタイトル」の記述方法「SEO対策」に有効な「キーワード」の記述方法「SEO対策」に有効な「ディスクリプション」の記述方法
【HTML】音声ファイルを埋め込む方法
【HTML】
音声ファイルを埋め込む方法
音声ファイルを埋め込む方法
INDEX
「audio」タグの使い方
オーディオファイルを再生するタグ
- audio
asideタグの記述例：
<audio src="オーディオファイルパス" autoplay loop>
<p>このブラウザは、 audioに未対応のため再生が出来ません。</p>
</audio>
<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;
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
