第2章12節で、自動でBGMを鳴らすには、<audio> タグを使って下記のように記述すればよいと説明しました。
<audio src="music.mp3" autoplay loop></audio>
ところが、数年前から、予期していない音楽が流れたり、ページを開くと突然動画が動き出すのは、よくないという考え方が広まり、Google Chrome では、自動再生ができなくなりました。その後、Opera、Firefox、Safari が追随しました。2020年7月9日現在、自動再生できるブラウザは、Microsoft社の Edge と Internet Explorer だけになりました。Microsoft社は、今後どう対応するか興味あるところです。
Net では、Javascriptを使って自動再生できるようにするなどの対策が紹介されていますが、世の中の趨勢に逆らってもしようがないので、素直に受け入れましょう。
そのためには、BGMは、自動再生ではなく、聴きたいときは、スイッチをONするようにすることです。そのためには、下記のように記述することになります。
BGMを鳴らしたいときは、下記のプレヤーをONにしてください。
<audio src="music.mp3" controls loop></audio>
上記だけでは、ピンと来ないと思いますので、第2章10節の10.3 スライドショー に適用してみましょう。BGMは、haruyokoi.mp3（春よ来い）を使います。
CSSとHTMLは、ソースを見ればわかりますが、念のため下記しておきます。
文字は、14pxと小さくし、茶色としました。プレヤーの大きさは、ブラウザによって異なるので、幅200px、高さ24pxに固定しました。文字とプレヤーの間を空けるために margin-top:8pxを指定しています。ところで、新しいEdgeのプレヤーの形状は、Google Chromeのプレヤーと同一になっています。
.naka {
font-size : 14px;
color : #900;
text-align : center;
}
audio {
width : 200px;
height : 24px;
margin-top : 8px;
}
<p class="naka">BGMを鳴らしたいときは、下記のプレヤーをONにしてください。<br>
<audio src="haruyokoi.mp3" controls loop></audio>
それでは、下記のリンクをクリックしてBGMを鳴らしてみてください。プレヤーは、ブラウザによって異なるので、ブラウザを変えて視聴してみてください。