FORUMS: list search recent posts

Sound effect in a web page

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Alex AvilaSound effect in a web page
by on Apr 3, 2012 at 8:22:41 am


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?

Return to posts index

Curtis ThompsonRe: Sound effect in a web page
by on Apr 3, 2012 at 10:39:05 pm


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?


Return to posts index

Curtis ThompsonRe: Sound effect in a web page
by on Apr 4, 2012 at 3:55:27 am

hello (again)...

this was an intriguing one that i figured would be fun to figure's what you wanted to do using the html5 audio tag and jquery:

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!


Return to posts index

Alex AvilaRe: Sound effect in a web page
by on Apr 4, 2012 at 9:05:04 am

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('<div <code>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">


Combining CSS and javascript, I have managed to create 250 square divs grouped, and are becoming smaller in size. My idea is to call the volumen property of embed tag and changed the value by the mouseover event in all of divs generated. But my first problem is that the volume property seems don't work in the javascript code.

Well, my english is horrible and I can't explain very well. I hope you can understand me. In any case I'm going to try to replicate your code 3 times and make it compatible with all of browsers.

Thank you again.

Return to posts index

Alex AvilaRe: Sound effect in a web page
by on Apr 4, 2012 at 11:10:45 am

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.

Return to posts index

Curtis ThompsonRe: Sound effect in a web page
by on Apr 4, 2012 at 6:58:03 pm


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...


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 All Rights Reserved