ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ(空白)」を表示する方法
「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】「ルビ」をふるための要素





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

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













「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