Sound on/off toggle solution

  • Hopefully this will help others in need of a simple sound/image toggle.

    I needed a solution that would work with PCs and iOS devices whereby the user could toggle a sound and corresponding image. I wanted the sound to play when the user clicks an image icon, upon click the icon changes to depict the sound on or off. When the sound is played (triggered by user click), the icon is in the "play" state, when the sound is stopped (triggered by user click) the icon is in the "stopped" state. When the sound the completed, the icon is in the "stopped" state. Once the sound is completed, the user can click the icon again to play the sound again. I made a sound icon image (soundonoff.png) that is 50px wide and 100px high, it has a speaker with sound waves (depicting "sound playing" located in the upper 1/2 of the image, and a speaker without sound waves (depicting "sound stopped") in the bottom 1/2 of the image. I have each pano in it's own xml file.

    In each pano I load stopallsounds onstart like this:

    <krpano version="1.0.8.14" onstart="action(startscene); stopallsounds();">


    Here's what goes in each pano xml where I want to play a sound:

    <!-- call the sound interface plugin -->
    <plugin name="soundinterface"
    url="plugins/soundinterface.swf"
    alturl="plugins/soundinterface.js"
    preload="true"
    keep="false"
    />

    <!-- position and image link for the clickable icon -->
    <style name="soundonoff"
    align="bottom"
    x="-165" y="8"
    url="images/soundonoff.png"
    />

    <!-- buttons to mute/unmute the sound -->
    <plugin name="sndoff"
    style="soundonoff"
    alpha="0.75"
    scale="1.0"
    onover="tween(alpha,1);"
    onout="tween(alpha,0.75);"
    crop="0|50|50|50"
    visible="true"
    onclick="playsound(s1,filetoplay.mp3,1,soundstop()); set(plugin[sndoff].visible,false); set(plugin[sndon].visible,true);"
    />

    <plugin name="sndon"
    style="soundonoff"
    alpha="0.75"
    scale="1.0"
    onover="tween(alpha,1);"
    onout="tween(alpha,0.75);"
    crop="0|0|50|50"
    visible="false"
    onclick="stopallsounds(); set(plugin[sndoff].visible,true); set(plugin[sndon].visible,false);"
    />

    <!-- action to change the clickable icon when sound has completed -->
    <action name="soundstop">
    set(plugin[sndoff].visible,true);
    set(plugin[sndon].visible,false);
    </action>


    sound on/off icon:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!