31

I embedded a background audio into my website which autoplays on visit.

The source of the audio is a online stream hotlink.

<audio autoplay>
      <source src="http://lel.com/link/to/stream.m3u">
    </audio>

I already managed to do that and it's working well.

Now I want to turn down the volume of the stream because the audio should just stay in the background and entertain the visitors instead of giving them ear cancer due to loudness.

I already searched the forums but I always found solutions for turning the volume of a video.

I also searched for the parameters of the audio tag but there seems no volume parameter for the audio tag.

Don't worry about legalities. The stream I use for the website has no copyright and I am permitted to use it on my website.

halfer
  • 19,824
  • 17
  • 99
  • 186
Captain Crazy
  • 333
  • 1
  • 4
  • 6

1 Answers1

69

Theres no volume attribute supported by browsers so you must set the volume property in JavaScript

<audio autoplay id="myaudio">
  <source src="http://lel.com/link/to/stream.m3u">
</audio>

<script>
  var audio = document.getElementById("myaudio");
  audio.volume = 0.2;
</script>

See http://jsfiddle.net/sjmcpherso/6r1emoxq/

sjm
  • 5,378
  • 1
  • 26
  • 37
  • 1
    I already knew i would had to use JS. However i've seen codes for embedded videos only. Anyways thanks for your help. C.C. – Captain Crazy Nov 17 '15 at 08:58
  • 4
    The jQuery version is $("#myaudio')[0].volume = 0.2; Just in case. – juanram0n Sep 22 '17 at 11:54
  • 2
    In my case it seems not to work, I added this as above and volume is still 100%. I think that can be due to script running earlier than loading the video part. – Piotr P Mar 15 '20 at 18:03
  • @PiotrP correct, you can use the `loadeddata` event and wait for the `readystate` to be `> 2`. there is also a `canplay` event you could use. – interesting-name-here Oct 27 '22 at 17:38