はじめに

こんにちは。
最近、新規事業系の部署から異動して朝デジ事業センターCX(カスタマーエクスペリエンス)部に所属している市野です。今は週刊英字新聞Asahi Weeklyのデジタル版であるAsahi Weekly DIGITAL(以下、AWD)の開発をしています。

AWDではHTMLのaudioタグを使って英語音声を再生できるようにしています。ただ、このaudioタグがなかなかの曲者、、、OSやブラウザによって見た目が異なることに加えて、レスポンシブの仕様が異なります。そこで今回はこの仕様について簡単にまとめてみます。

※本記事の内容はは全て執筆時点(2023/12/08)のものです。

Audioタグのcontrols属性

Audioタグは contorols属性を付加することで、ユーザーに再生・一時停止・速度調整など音声操作機能を提供するパネルを表示できます。ここでは、この属性を有効化した状態で話を進めます。

比較対象

OS

Windows
Mac

ブラウザ

Chrome
Safari
Firefox

UIの比較

横幅約280pxでのスクショとなります。

OS	ブラウザ	ブラウザVer
Windows	Chrome	119.0.6045.106
	FireFox	119.0
	Edge	119.0.2151.44
Mac	Safari	17613.3.9.1.16
	Chrome	119.0.6045.105
Android	Chrome	119.0.6045.66
iPhone	Safari	604.1
	Chrome	108.0.5359.112
iPad	Safari	605.1.15
	Chrome	114.0.5735.124

ブラウザによって見た目が異なることがわかります。

横幅による挙動

	Chrome	Safari	Firefox
横幅が小さいときの操作パネルの表示	3点リーダーから操作可能	消えるため操作不可。ズームすると表示される。	再生速度アイコンが消えるが、右クリックで変更可能

横幅に関わらずChromeは3点リーダーから操作することが可能でした。癖があるのはSafariとFirefox。これらは横幅が短くなると操作アイコンが消えてしまい、Chromeのように3点リーダーが表示されることもありませんでした。そのため、ユーザーにとってはそもそも操作ができないと勘違いする可能性があります。Firefoxの右クリックで再生速度を変更できる仕様もなかなか気付きにくい印象。

終わりに

今回は簡単にaudioタグのUIとレスポンシブ仕様について整理してみました。本来、公式から詳細の仕様についてドキュメント等が出ていれば嬉しいのですが、見つけられず。(あったらぜひ教えてください🙇‍♂️)

参考文献

https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio