Hover sound on text

JavaScript
1

Hello!

I am trying to get hoversound to work on a post in my wordpress theme. I initially found a system that works based off one of the forum posts - Play sound on hover or click - diffferent audio for different images

The only difference is that I needed it to be hover on a piece of text so I changed the code from this

<script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
   </script>

<img src="htttp://www.yoursite.com/image.png" value="PLAY"  onclick="play()">
<audio id="audio" src="yoursite.com/song.ogg" ></audio>

To this

 <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
   </script>

<a nohref value="PLAY"  onmouseover="play()">Your Text</a>
<audio id="audio" src="yoursite.com/song.ogg" >
<audio id="audio" src="yoursite.com/song.wav" >
<audio id="audio" src="yoursite.com/song.mp3" >
</audio>

Which worked for a single text + audio link. The issue I encountered was using multiple audio clips associate to multiple pieces of text. As all the hover sounds would repeat the first audio snippet only.

I tried using another thing I found here - http://wpfaq.org/site/sound-effects/

<script>
// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}

var mouseoversound1=createsoundbite("sound.ogg", "sound.mp3")
var clicksound1=createsoundbite("click_sound.ogg", "click_sound.mp3")

</script>

This last worked when I tested it on dreamweaver and it worked. But when I inserted into the post it function.

In both examples presented in this post I kept the original source with dummy info, fyi!

halp and thank you for taking the time to see this newbie post.

1 Like
2

Try this:

<script>
    function play(index){
        var audio = document.getElementById("audio"+index);
        audio.play();
    }
</script>

<a nohref value="PLAY"  onmouseover="play(1)">Your Text 1</a>
<a nohref value="PLAY"  onmouseover="play(2)">Your Text 2</a>
<a nohref value="PLAY"  onmouseover="play(3)">Your Text 3</a>
<audio id="audio1" src="yoursite.com/song1.ogg"></audio>
<audio id="audio2" src="yoursite.com/song2.mp3" ></audio>
<audio id="audio3" src="yoursite.com/song3.mp3" ></audio>
3

THANK YOU! I will try it out immediately and let you know.

Thank you!

4

It works! I want to kiss you! Thank you!!

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.