ブログを書いているとき、自分の好きな音楽をブログのウェブページに追加したいと思います。そうすることで、執筆や読書の際に気分がより楽しくなります。その場合、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>
これにより、音声を挿入し、ウェブページのどこかをクリックすると再生効果がトリガーされます。利点と欠点がありますが、この方法を使用すると、再生を一度開始すると一時停止機能を有効にすることはできません。つまり、ずっと再生され続けます。
個人ブログのように書く場合、この欠点はあまり影響しません。この方法を記録しておきます。