audio でプレイヤーのサイズ指定
2016年05月27日（Fri）
|
|
|
昨日の記事に載せた、mp3 形式ファイルの再生プレイヤー。
■拍手お礼ＳＳより抜粋 ※音量に注意して下さい
mp3形式 540KB 1分8秒
今まで使用していた＜embed＞ではなく＜audio＞タグで記述してみました。
＜embed＞だと、ブラウザによっては autostart="false" autoplay="false" を指定していても、ページを開いた瞬間、大音量で再生が始まってしまうという困ったちゃんな状態になっておりまして……以前その指摘を受けて確か対処したはずなのに、昨夜同じように＜embed＞mp3 を埋め込み、Google Chrome で表示させてみた結果は、まさに無惨の一言。
……三つの異なる音声ファイルが大音量で同時再生されて、えらいことに ＿|￣|○
false を 0 としてみても状況に変化はなく……いろいろ試行錯誤した結果が＜audio＞での記述だったのでした。
とりあえずＩＥ１１、 Google Chrome 、あと Android 版 Opera では自動再生が始まらないことを確認。
ブラウザによっては＜audio＞タグや mp3 自体の再生に対応してなかったりもするようですが……いきなり再生が始まるよりは万倍マシでしょう（苦笑）
しかしプレイヤーの外観もまたブラウザによって異なってくるのが、標準状態だとＩＥでの表示が大きすぎて、うちのブログだと記事の中に入りきらず、またしても ＿|￣|○
めげずにいろいろ調べた結果、スタイルシート（ＣＳＳ）でサイズ指定できることが判りました。
外部ＣＳＳの場合、
audio { width: 400px; height:40px; display: block; margin:0px; }
ＨＴＭＬに直接記述する場合は、
＜audio src="http://〜〜.mp3" controls preload="auto" style="width: 400px; height:40px;"＞
のように記述すれば良いようです。
いちおう過去の記事も、思い出せる限りはさかのぼって修正しましたが……まだ残ってるかもなあ。
いっそ mp4 あたりにしてニコ動らへんにＵＰして、その動画を貼り付けた方が汎用性高いかしら……？
|
|
No.7587
(電脳)
|
|
|
|
|
この記事のトラックバックURL
| |
https://plant.mints.ne.jp/sfs6_diary/sfs6_diary_tb.cgi/201605277587
|
|
|
|
| プロフィール |
|
神崎 真（かんざき まこと）
小説とマンガと電子小物をこよなく愛する、昭和生まれのネットジャンキー。
ちなみに当覚え書きでは、
ゼロさん= W-ZERO3(WS004)
スマホ= 003P(Android端末)
シグ３= SigmarionIII です。
|
|
|
