アフィリエイト広告を利用しております。
参考サイトの記載がある場合はそちらの方がより詳しく記載説明がされているのでぜひそちらもご覧ください。
そのままコピペしても反映されないものもあります。サイトごとに変えないといけない箇所がありますので修正してください。

HTML JavaScript WordPress プラグイン

【注意：音楽が鳴ります】HP上で音楽を再生させる処理(自動再生はできない？)

たまにＨＰ開くと音楽がなるページがありますよね（ほんまにたまに）
あれがどうやって再現しているのか気になったので記述する
またタイトルにもある様に本ページは「パッヘルベルのカノン」が自動再生するので注意してください。 

document.addEventListener('DOMContentLoaded', function () {
  // 音楽要素を取得
  var audio = document.getElementById('bg-music');
  // 音量を0.2に設定（0.0から1.0の範囲で指定）
  audio.volume = 0.2;
});

<audio id="bg-music" autoplay loop>
  <source src="/job-work-html/wp-content/uploads/2025/01/Pachelbel-Canon-in-D-2019-AR.mp3" type="audio/mpeg">
  お使いのブラウザはオーディオ要素をサポートしていません。
</audio>

自動で再生しない（笑い）
コードはあってると思うがブラウザーで多分弾かれてます
なので「Compact Audio Player」というプラグインを使って、再生ボタン付きで鳴らすようにする（自動じゃない）
「音楽の自動再生は訪問者にとって迷惑に感じられる場合があります」とあるのでブロックされるんですね
じゃああのサイトどうやって鳴らしてるんだろう？(動画流してることが判明・・・)
ちなみに私も自動的に音楽（音）が鳴るのは推奨しません。びっくりしますからね(-_-;)

【Amazon】ちゃんと知っておきたい人のHTML/CSS完全入門: HTML習得の最短講座！1日３０分で楽しく学ぼう！ Kindle版

おすすめ記事

1
クラシックエディタ用のプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...
2
クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない？ この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
3
Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた
アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

-HTML, JavaScript, WordPress, プラグイン
-