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.
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/
Related
i'm trying to add autoplay audio in my html page and i already tried embed and audio with and without controls and optional attributes, and absolute path. Tried different formats, though i know that Opera supports .ogg. My last try is here:
<audio controls id="music1">
<source src="./models/laughing.ogg" type="audio/ogg"/>
</audio>
html page and audio file are located like this:
if i press play button audio is played, but when i start my entire project the button is covered (as should be). And anyway i want it to be autoplay so
My Opera is the last version, Windows
Autoplay doesn't typically work. You need some sort of user interaction, like a click.
There is nothing you can really do about this. It's a browser "feature" to prevent ads from playing audio in the background.
<audio controls autoplay>
Try adding "autoplay" inside the voice tag.
In React I am getting the source file dynamically through an api call.
<audio src={rec.data2} type="audio/mp3" controls autoplay />
It is not displaying the usual play button with volume control, instead it just displays the link. What am I doing wrong?
try this:
<audio controls>
<source src={rec.data2} type="audio/mpeg">
</audio>
w3Schools explain it :
Definition and Usage The tag is used to embed sound content in
a document, such as music or other audio streams.
The tag contains one or more tags with different
audio sources. The browser will choose the first source it supports.
The text between the and tags will only be displayed
in browsers that do not support the element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
I am trying to add audio in my code
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
and above code is working fine.. but i am facing problem if audio is quite big. i have to wait for couples of second to listen the audio,
is there is any alternative for the same so we can play audio instantly without any wait?
I found one solution , see if it works :
You can use the following property of audio element to solve your problem!!
Preload hinting:
You can optionally use the preload attribute to give the browser a hint as to whether, and how, it should preload the audio file when the page loads. Preloading the audio file means it can play instantly when the user hits the “play” button, which is a nicer experience for the user.
<audio preload="auto">
<source src="WhiteChristmas.mp3">
<source src="WhiteChristmas.ogg">
</audio>
Refer this site:
https://www.elated.com/html5-audio/
you could try to check the spelling...i to had this problem but when i checked and corrected the spelling of the file,it loaded instantly.The code is:
<audio controls
Your browser does not support the audio element.
I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.
I've got an audio file being played with the basic HTML5 audio tag:
<audio controls itemprop="audio">
<source src="http://mysite/mus/my_music_file.mp3" />
</audio>
I'm using Audio.js along with the audio tag for serving up a fallback flash version, as well as a nicely designed player.
In Chrome and Firefox, everything is working as it should, and it's showing the length of the track. Safari is showing: Infinity:NanNan in the spot where the song's length should be shown.
I did a search and found a few similar questions, but both seem to be talking about PHP headers? I'm not using PHP with my audio files, but it is within a Wordpress theme. Could that be an issue?
you should indicate the codecs, and not preload
<audio preload="none" controls>
<source src="/path/to/the/source" type="audio/mp3" codecs="mp3"/>
</audio>