1. Dismiss Notice

Sound When Mouse Over Link in Footer

Discussion in 'BlackBird WordPress Theme' started by itsallgeektome, Aug 19, 2013.

  1. itsallgeektome

    itsallgeektome New Member

    Joined:
    Mar 11, 2012
    Messages:
    14
    Likes Received:
    2
    I'm using Blackbird for a very simple front page to my forums and wanted to add a 4 second sound clip that will play when people hover over the "Enter The Forums" link in the footer. I've tried a couple of scripts I found online to no avail. Any suggestions?

    http://driftengaged.com
     
    itsallgeektome, Aug 19, 2013
    #1
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    Go to the header.php file present in your theme directory and paste the code given below in the header tag(<head> </head>)
    as shown in the image given below.

    Code:
    <script>
 
// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
 
//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound
 
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")}}
    }
}
 
//Initialize two sound clips with 1 fallback file each:
 
var mouseoversound=createsoundbite("Enter the url of your sound clip here", "Enter the url of your sound clip here")
 
</script>
    [​IMG]


    And now go to the footer.php file present in your theme directory and paste the code given below in that file.

    Code:
    <a href="#" onmouseover="mouseoversound.playclip()">"Enter your text here, after hover on which you want to play sound clip "</a>
     
    Piyush, Aug 19, 2013
    #2
  3. itsallgeektome

    itsallgeektome New Member

    Joined:
    Mar 11, 2012
    Messages:
    14
    Likes Received:
    2
    Unfortunately, this doesn't seem to be working for me.

    From my header.php:

    <?php wp_head(); ?>
    <script>

    // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
    // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

    //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
    //** Call: uniquevar.playclip() to play sound

    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)
    if (arguments.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")}}
    }
    }

    //Initialize two sound clips with 1 fallback file each:

    var mouseoversound=createsoundbite("http://driftengaged.com/wp-content/uploads/2013/08/welcome.wav", "http://driftengaged.com/wp-content/uploads/2013/08/welcome.wav")

    </script>
    </head>
    <!--[if IE 6]>
    <style>
    .feature-post .feature-box {
    margin-right:10px;}
    }


    and for the footer.php:

    <a href="http://forums.driftengaged.com/" onmouseover="mouseoversound.playclip()">ENTER THE FORUMS</a


    Should I be altering anything else?
     
    itsallgeektome, Aug 27, 2013
    #3
  4. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Piyush, Aug 27, 2013
    #4
  5. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    The above code are working perfectly but you have done something wrong while adding the code.
    Now, the issue has been resolved, you can check your website.
     
    Piyush, Aug 28, 2013
    #5

Share This Page