-
Sound effect in a web page
Hi,
I’m designing a web page for a spund designer guy and I would like to insert a background sound whose volume increases and turns down depending on mouse position.
I want to determine a point on the page where the volume is low, and to get away from that point, the volume rises.
Does anybody know a code (flash or jquery) to do this?
-
5 Replies
-
hello…
don’t know of a plug in or existing script, but you can use javascript (or jquery on top of course) to get mouse coordinates pretty easily. then you could calculate how far away from your point that was to determine volume. the last step would be to use either html5’s audio tag (not fully supported, mind you) or a 3rd party player where you could control volume via javascript and adjust it accordingly based on your calculation of distance in the first part…
that’s _how_ i’d do it – if you aren’t inclined to program that sort of stuff then i’d have to defer to a suggestion of an existing tool, but this sounds specific enough that i’d guess you’d not find much… :-/
hope that helps a bit?
sitruc
-
hello (again)…
this was an intriguing one that i figured would be fun to figure out…here’s what you wanted to do using the html5 audio tag and jquery:
https://sitruc.com/cow/audio_distance/
basically the distance between the mouse coordinates and the center point of the square are calculated and then converted to a volume, at which point the volume of the audio object is adjusted to that number.
note that only opera, firefox and google will support the audio tag fully – if you wanted to do something that was more universal, you’d have to find an audio playback tool that allowed for volume to be set via javascript access. note also that you don’t need to have the controls there – i just have them showing for the sake of example.
(you might also need headphones to fully experience the volume shift – it is mildly subtle with the example audio i used)
hope that helps!
sitruc
-
Wow, thank you very much for your replays. You’ve done a great work.
I’m a beginner in javascript (and jquery) so I would like to know if we can repeat the same process 3 times in the same page. I mean that I want to use three sounds with 3 different coordinates.
In other sense, for make it universal, yesterday I was trying to do something with the EMBED tag. I know it is disused, but it still works in all of browsers (except opera). I developed this code:
<script type="text/javascript">
function sonido1() {
var volumenup = document.getElementById(molinillo);
volumenup.volume = 100;}
function capasAnidadas() {
for (var i=400; i>150; i--) {
inversa = (400-i)/2;
document.write('style="position: absolute; margin:’ + (inversa) + ‘px; ‘ + ‘width:’ + (i) + ‘px; ‘ + ‘height:’ + (i) + ‘px” class=”cajas”>’ + ‘style=”width:400px; height:400px; position:relative; left:200px; top:200px; background:#000″ onmouseover=”sonido1()”>
<script type=”text/javascript”>
capasAnidadas();
-
I just discovered that what I was trying to do is impossible, because the volume atribute can’t be changed when the page has been loaded.
So, definitely I will continue your way. I will tell you my progress.
-
hello…
you could easily modify my code to do 3 effects, but i assume then that you’d have to have all 3 effects playing at the same time, unless they were triggered to play by clicking somewhere. still doable, though…
the audio tag will not work in any older ie version, so you will be stuck there. you might want to consider a player like this:
that you can control volume on via javascript – that is the key thing you need, which the html5 audio element does allow…but you won’t get full support with it…
sitruc
Reply to this Discussion! Login or Sign Up