programmering - hhvordan afspiller jeg lyd ved mouseover i jquery? - Udvikleren.dk

Tags: jquery javascript programmering

Bruger #4487 @ 11.06.11 14:57

Hej allesammen, jeg søgte lidt på google, og kunne ikke rigtigt finde noget jeg syntes jeg kunne bruge, så spørger nu herinde.

Er der en nem og smart måde hvorpå jeg kan få afspillet en lille lyd hver gang en bruger holder musen over et specifikt link?

Lad os sige at jeg har dette link.

HTML kode

 <a href="#" title="Afspil lyd" class="play_sound">Afspil lyd</a>

Hvordan kan jeg så nemt og elegant få afspillet en simpel lydfil (mp3), indtil brugeren igen ikke holder musen over linket. bemærk at lyden kun skal afspilles en gang, altså den skal ikke køre i en loop.

Håber at der er nogle der kender en nem løsning på dette

10 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 23 karma

Sorter efter stemmer Sorter efter dato

Bruger #16666 @ 11.06.11 21:29

Hej Martin,

Med dette lille script tilføjer du et embed-tag i din knap (musicBtn) ved mouseover, og fjerner det igen ved mouseout. Embed-tagget indeholder din musik fil, og afspilles automatisk når embed-tagget kaldes pga. "autostart=true".

Musikken afspilles kun engang, men starter forfra hvis brugeren laver et mouseover igen.

jQuery Code:

JScript kode

 $("#music_btn").mouseover( function(){
 $("#music_btn").html("<div id='music'><embed src='music.mp3' hidden=true autostart=true loop=false></embed></div>");
 });
 
 $("#music_btn").mouseout( function(){
 $("#music_btn").html("<div id='music'></div>");
 });

Håber det kan bruges.

Indlæg senest redigeret d. 11.06.2011 21:38 af Bruger #16666

Bruger #11328 @ 12.06.11 23:40

1.323

Check http://www.schillmania.com/projects/soundmanager2/

Måske lidt overkill, men det virker (har Flash fallback)!

Bruger #16666 @ 13.06.11 10:23

Hej Martin,

Jeg har lavet et "Safari-Fix", det er ikke helt så kønt, men det virker

- jeg har ikke tjekket i Opera.

Scriptet tjekker hvilken browser brugeren har og er det Safari, bruges Object-tagget, istedet for Embed-tagget.

Hvis det ikke er Safari, bruges Embed-tagget.

Håber det kan bruges.

JScript kode

 // On mouseover
 $("#music_btn").mouseover( function(){
     if($.browser.safari){
         $("#music_btn").html("<div id='music'><object height='0' width='0'><param name='src' value='music.mp3'><param name='autoplay' value='true'></object></div>");
     }else{
         $("#music_btn").html("<div id='music'><embed src='music.mp3' hidden=true autostart=true loop=false></embed></div>");
     }
 });
     
 // On mouseout
 $("#music_btn").mouseout( function(){
     $("#music_btn").html("<div id='music'></div>");
 });

Indlæg senest redigeret d. 13.06.2011 10:27 af Bruger #16666

Bruger #5097 @ 11.06.11 15:30

818

Kan det overhovedet lade sig gøre? Normalt bruger man Flash til den slags

Bruger #4487 @ 11.06.11 15:58

1.384

åhh ok

, well hvis det ikke er muligt er det sikkert derfor jeg for nogle underlige søgninger på google

Bruger #3143 @ 11.06.11 17:41

1.965

Hvis du vil have det til at virke i ældre udgaver af IE, skal du bruge Flash. Men hvorfor vil du have noget lyd når musen kommer over et link? Der det for at irritere sidens besøgende mest muligt?