ちょっと前にスマホサイトで音声や動画を流す要件があり、
注意が必要な箇所があったのでメモ書き程度に残します。

使うのはHTML5で追加されたauido、videoタグです。
その名の通り、audioは音声ファイル、videoタグは動画ファイルを
Webサイト上で再生するためのタグになります。

タグ自体の説明はぐぐってもらうとして、

以下に気をつけるべき注意点を書いていきます。

自動ロードされない(video&audio)

preloadとload属性は無視されます。
PCではもちろん動作しますが、スマホでは無視です。
これちゃんと意味があって、勝手にロードされたら
課金されちゃうでしょ？っていう上での動きのようです。
言われてみれば確かにそうですね。。。

じゃ、いつロードされるのか？
jsで、ドキュメントロード後に

とかやってもダメです。
ロードされません。 じゃ、いつやればいいの？ってことなんですが、
これはユーザアクションを受け取ったFunctionでしか出来ません。

例えば

って感じ。
必ずユーザ入力ありきでしかロードされません。
つまりなにかクリックとかの動作が必要ということです。

例えば、サイト表示時に

の選択肢を出して、「はい」を押したらロードするとか。

自動再生されない(video&audio)

これもロード同様に、autoplayとか効きません。 ロード同様に、

するためにはなんらかの入力が必要になります。
ただロードからの自動再生は出来ました。 端末、OSに実装方法が異なりますが、autoplay属性をtrueにして
dataloadedイベント（or canplay）をハンドルして、そこからplay()することでいけます。

複数音源読み込みがOSにより不安定(audio)

例えば、１画面でa.mp3とb.mp3というファイルを再生したい場合
iOS6で動作が不安定になりました。
音がロードされなかったり鳴らなかったり。。。
時には遅延がひどかったり。

これ、対策としては１音源のみをロードするようにして
再生位置、再生秒数を指定するような形で各音を再生するような形にしました。
１音源のみを読みこめば良いのでロード処理もシンプルになります。

BASIC認証は外しておくのが吉(video&audio)

テストアップなどの場合、BASIC認証かけたりしてネット上にアップすることもあるかと思います。
その場合、videoではposter画像（動画ロード時までの静止画）が表示されなかったり、
audioでは音が再生されなかったりという現象があります。
iOSやAndroidのバージョンに依存するようだったので、認証系は外して検証するのが吉です。

非表示にしておくと良くないっぽい(video)

load -> playとするまで

としておき、load直前で

してたのですが、一部端末（Android）で

loadが正常に開始されない現象ありました。

なので、displayによる非表示はせずに画像を重ねて
見えないようにすることで対処しました。

最後に

思い出しながら書きましたが大きなところではこんなところかと思います。
サイトで音がでるのはあまりないかなと思いますが、
これから増えていくのかなーと思ってたりします。

特にloadとplayにユーザアクションが必要というのは
UIに関わってくるところでもあるので、ユーザさんが

「スマホサイトで音鳴らしたい！」

と言ったらそこを考慮しつつ設計するのがまず大事かと思います。

今回の案件でこの辺のノウハウ溜まったので、お仕事お待ちしておりますm(_ _)m

※こちらの記事は私が個人ブログに書いた記事を加筆訂正したものです。