Html audio set volume

How to set volume of audio object in Javascript?

The HTML5 element allows developers to embed sound content in web pages. One important aspect of playing audio is controlling its volume, which can be set using JavaScript.

Method 1: Using the volume Property

To set the volume of an audio object in JavaScript using the volume property, you can follow these steps:

1. Set the volume of the audio object using the volume property. The volume property is a number between 0 and 1, where 0 is muted and 1 is the maximum volume.

audio.addEventListener('volumechange', function()  console.log('Volume changed to ' + audio.volume); >);

Here’s an example code snippet that sets the volume of an audio object to 0.5:

const audio = new Audio(); audio.src = "audio.mp3"; audio.volume = 0.5; audio.play();

You can adjust the volume by changing the value of the volume property. For example, to increase the volume to 0.8:

That’s how you can set the volume of an audio object in JavaScript using the volume property.

Method 2: Using the gainNode Method

To set the volume of an audio object in JavaScript using the gainNode method, follow these steps:

const audioCtx = new AudioContext();

const audio = new Audio(); audio.src = "your-audio-file.mp3";

const source = audioCtx.createMediaElementSource(audio); source.connect(audioCtx.destination);

const gainNode = audioCtx.createGain(); source.connect(gainNode); gainNode.connect(audioCtx.destination);

gainNode.gain.value = 0.5; // half volume

Here is the full code example:

const audioCtx = new AudioContext(); const audio = new Audio(); audio.src = "your-audio-file.mp3"; const source = audioCtx.createMediaElementSource(audio); const gainNode = audioCtx.createGain(); source.connect(gainNode); gainNode.connect(audioCtx.destination); gainNode.gain.value = 0.5; // half volume

You can adjust the gain value from 0 (mute) to 1 (full volume).

Method 3: Using the setVolume Function

To set the volume of an audio object in JavaScript using the setVolume function, you can follow these steps:

const audio = new Audio('path/to/audio/file.mp3');

function setVolume(volume)  audio.volume = volume; >

1. Now, you can call the setVolume function to set the volume of the audio object to a specific value.

setVolume(0.5); // sets the volume to 50%

Here’s the complete code example:

const audio = new Audio('path/to/audio/file.mp3'); function setVolume(volume)  audio.volume = volume; > setVolume(0.5); // sets the volume to 50%

You can also add event listeners to change the volume dynamically based on user input. For example, you can add an input range element to your HTML and use its value to set the volume:

input type="range" min="0" max="1" step="0.1" value="0.5" id="volumeSlider">

const audio = new Audio('path/to/audio/file.mp3'); const volumeSlider = document.getElementById('volumeSlider'); function setVolume(volume)  audio.volume = volume; > volumeSlider.addEventListener('input', () =>  const volume = volumeSlider.value; setVolume(volume); >);

This code creates an event listener for the input range element and calls the setVolume function with the current value of the slider whenever it changes.

That’s it! You now know how to set the volume of an audio object in JavaScript using the setVolume function.

Источник

HTML Audio/Video DOM volume Property

The volume property sets or returns the current volume of the audio/video.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
volume	Yes	9.0	3.5	Yes	Yes

Syntax

Return the volume property:

Property Values

Value	Description
number	Specifies the current volume of the audio/video. Must be a number between 0.0 and 1.0.

• 1.0 is highest volume (100%. This is default)
• 0.5 is half volume (50%)
• 0.0 is silent (same as mute)

Technical Details

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Audio Volume: Quick & Easy HTML Guide For Setting Initial Volume

Attribute of New Audio HTML Element: Master It Out Now With Our Code Example What does Audio Volume: Quick & Easy HTML Guide For Setting Initial Volume do? Specifies the initial volume setting of the audio element, in a range from 0.0 to 1.0.

Code Example

Low Volume
   You will see this text if native audio playback is not supported. Audio by Beeld en Geluid [CC BY-SA 3.0], via Wikimedia Commons 
High Volume
 You will see this text if native audio playback is not supported. Audio by JCZA [CC BY-SA 3.0] , via Wikimedia Commons .audio-example 

Low Volume

You will see this text if native audio playback is not supported. Audio by Beeld en Geluid [CC BY-SA 3.0], via Wikimedia Commons

High Volume

You will see this text if native audio playback is not supported. Audio by JCZA [CC BY-SA 3.0] , via Wikimedia Commons

Values of the volume Attribute

All Attributes of audio Element

Attribute name	Values	Notes
volume	0.0–1.0	Specifies the initial volume setting of the audio element, in a range from 0.0 to 1.0.
preload	none metadata auto	Requests a particular preload behavior to the browser, which the browser may or may not follow.
muted	Specifies that the volume on the audio player should initially be muted.
loop	Specifies that the audio content should loop indefinitely once playback has begun.
controls	Toggles the display of audio playback controls.
autoplay	Specifies that the audio playback should begin immediately on page load.
src	url	Specifies the source file for an audio element.

Источник

Освоение HTML5 тега audio

С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.

Используем для вставки звукового файлу на страницу

Ниже приведен простейший пример использования тега , он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.

Воспроизведение звука в цикле

Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.

Отображение элементов управления

Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls .

Различные форматы файлов

поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.

Указываем MIME-тип файлов

При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type .

Для старых браузеров

А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег

? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .  

Буферизация файлов

• none — если вы не хотите использовать буфер файлов;
• auto — если вы хотите, чтобы браузер беферизировал файл целиком;
• metadata — для загрузки лишь служебной информации (продолжительность звучания и др.).

Управление воспроизведением через JavaScript

Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:

  
Воспроизведение Пауза Громкость + Громкость - 
 

Источник