[ 解決済 ] 埋め込み音声のボリューム調整ができない

[たわしそふと]

■ WordPress のバージョン
6.9

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
1.37.3

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
Top画面に張り付けた「音声」のボリュームを低く抑えたい。

■ 自分で試した事
Top画面の編集画面から、貼り付けた「音声」パターンを選択し、表示されている音量コントロールバーを設定して「保存」をした。

■ 症状が発生するブラウザ
Crome, Edge

■ 実際の症状
音量コントロールバーの設定内容は無視され、常に最大音量で再生されてしまう。
※音量設定変更後に、再度設定画面を参照すると最大音量にもどってしまっている。

■ その他特記事項
顧客に管理委譲したサイトでTop画面にBGMを設定した結果、音量調整ができない、との質問があり、調査してみたところ前述の事象を確認しました。
とりあえず、元の音源ファイル自体のボリュームを小さくするように指示したのですが、これはパターンの仕様なのでしょうか？

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

X’MASイブ、楽しませてもらった🤣ので、お礼に回答を…😊

> これはパターンの仕様なのでしょうか？

最大音量に戻るのはブラウザの仕様ですね、たぶん。

BGM として使っているので音源のボリュームを下げておくべきですが、
カスタム HTML ブロックを追加して以下のコードを貼り付ければ、音量設定をコントロールできます。

<script>
window.addEventListener('DOMContentLoaded', function(){
  const audioElement = document.querySelector('audio');
  audioElement.volume = 0.2;
});
</script>

0.2 のところに 0（消音）～1（最大音量）を指定します。

[対馬 俊彦]

先ほどの回答に補足、というか訂正です。

私が提示した JavaScript のコードは PC のブラウザには有効ですが、
モバイルデバイスのブラウザには無効でした。

ということで、音源のボリュームを下げるのが確実です。

[たわしそふと]

対馬さん
いつも迅速なご回答をありがとうございました。

え？　これってブラウザの仕様なんですか？
まさか、こんな基本的な音量制御がブラウザの仕様に左右されるとは思ってもみませんでした。

＞カスタム HTML ブロックを追加して以下のコードを貼り付ければ、音量設定をコントロールできます。
ありがとうございます、お手数をおかけして恐縮です。
でも、X-TPの特に顧客に委譲したサイトでコードを追加するのはどうしてもいやなんですよね。

＞モバイルデバイスのブラウザには無効でした。
うわぁ、それはまずいですね。
HPは、もはやスマホから見られることのほうが普通な時代ですから。

というわけで
＞音源のボリュームを下げるのが確実です。
承知いたしました。　ではそのように周知いたします。

PS：ダメ元でVektorさんに改良ブロックをおねだりしてみまーす。😇

[投稿者]

投稿