ブログを書いているとき、自分の好きな音楽をブログのウェブページに追加したいと思いました。そうすることで、執筆や読書の際に気分がより楽しくなります。その場合、audioタグを使用する必要があります。
<audio src=""></audio>
同時に、audio タグには便利な属性がいくつかあります。よく使用されるものは以下の通りです：
- src -- これは言わずもがなです
- autoplay -- この属性がある場合、音声は準備ができたらすぐに再生されます
- controls -- ウェブページにオーディオコントロールを表示します
- loop -- ループ再生
- muted -- デフォルトでミュート
しかし、autoplay を設定する際に、Chrome は自動再生を厳しく制限していることに気付きました。つまり、この属性は直接無効化され、ページが対話なしで開かれた場合、自動再生は許可されません。
しかし、よく考えてみると、この方法は実際にはユーザーにとって有利です。ユーザーがブロードバンドのデータ通信を使用している場合、ビデオやオーディオが自動的に再生されると、ユーザーに損失をもたらす可能性があります。さらに、一部の広告は自動的に再生されるため、ユーザーの体験に直接影響を与えます。したがって、Chrome の方法には賛成です。
しかし、考え直してみると、違いますね、私の目的はこの問題を解決することであり、Google を称賛することではありません。自分の個人ブログに好きな音楽を追加したいので、あまり効果的ではない方法を見つけました。ウェブページのどこかをクリックすると、自動的に autoplay の音声効果がトリガーされるように、イベントを模擬する方法です。コードを示します。
<script>
function toggleSound() {
var music = document.getElementById("vd");
//IDを取得
console.log(music);
console.log(music.paused);
if (music.paused) {
//再生されているかどうかを確認
music.paused=false;
music.play();
//再生されていなければ再生する
}
}
setInterval("toggleSound()",1);
</script>
これで処理が完了したら、オーディオを挿入し、ウェブページのどこかをクリックすると再生効果がトリガーされます。利点と欠点がありますが、この方法を使用すると、再生を開始すると一時停止機能を使用できなくなり、つまり、ずっと再生され続けます。
個人ブログのように書く場合、この欠点はあまり影響しませんが、この方法を記録しておきます。