web-dev-qa-db-ja.com

<audio>タグに特定の開始音量を設定する方法

私はHTMLとCSSの基本的な知識しか持っておらず、この質問に対する答えを見つけるためにGoogleを広範囲に調べてきました。すべて、JavaScriptやjQueryを指しているようです。試してみましたが、動作しません。

Webサイトの読み込み時に再生を開始するオーディオファイルがあります。訪問者の音量が大きい場合に心臓発作を起こさないように、特定の開始音量を設定したいと思います。

これは私が持っているものです：

HTML：

<audio id="bgAudio" autoplay="autoplay" controls="controls" loop="loop" src="audio/025.mp3"></audio>

CSS：

#bgAudio {
position:fixed;
z-index:1000; 
width:250px;
}

JavaScript：

backgroundAudio=document.getElementById("bgAudio");
backgroundAudio.volume=0.5;

どんな助けでも大歓迎です！

javascriptjqueryhtml5audiovolume
7
Almir

要素を取得しておらず、コンソールにエラーが表示されます

Nullのプロパティ「ボリューム」を設定できません

スクリプトを</body>タグの直前に移動するか、次のようにします。

window.onload = function() {
    var backgroundAudio=document.getElementById("bgAudio");
    backgroundAudio.volume=0.5;
}

編集：

右クリックを無効にすることほど迷惑なことはありませんが、とにかく、これがあなたが持っているものです

;(function($){
mySong=document.getElementById("bgAudio");
mySong.volume=0.2;

setVolume = function(bgAudio,vol) {
    sounds[bgAudio].volume = 0.33;
}
})(jQuery);

今それをに変更します

jQuery(function($) {
    $("#bgAudio").prop("volume", 0.2);

    window.setVolume = function(bgAudio, vol) {
        sounds[bgAudio].volume = vol;
    }
});
7
adeneo

JavaScriptを使用して音量を設定しますが、オブジェクトを変更できるようにDOMを準備しておく必要があります。おそらく、ondocumentreadyイベント、または行動を促すフレーズのClickイベントを使用します。

まず、変更するビデオオブジェクトを取得します。

bgAudio = document.getElementById("bgAudio");

次に、bgAudioオブジェクトを使用して、ボリュームなどのプロパティを設定します。

bgAudio.volume = 0.2;

あなたはウェブサイトで作業しているので、私は次のようなことをします（jQueryを使用できると仮定します）：

$(document).ready(function() {
    // the site has now loaded, grab the video!
    bgAudio = document.getElementById("bgAudio");
    // now Tweak the volume!
    bgAudio.volume = 0.2;
    // now, play it!
    bgAudio.play();
});

Jquery ready、イベント、およびビデオに関するこのリファレンス資料を確認してください。

1
Antonio Rodriguez Martinez