Example-Tutorial -- Play different music inside different panos

    Hi everyone!

    It was asked several times on this forum how to play different sound in different panos so that music doesn’t repeat or interfere. So I’ve decided to make a small tutorial. Let’s try to write a small xml-plugin which will play different music in a virtual tour.

    Step One. Creating a new VT and adding sound files to it.

    If you’re not a very beginner, you can skip this one and go further ahead, but I bet this step is a piece of cake even for beginners. Here’s what we do:

    1. Let’s make some folder and pick up any five equirectangular images inside it. Now select all of them and drag-n-drop onto the MAKE VTOUR (VR-OPT) droplet.bat file inside your Krpano folder (let’s use the latest one, 1.19-pr4).
    2. While the droplet is making our images, let’s go to Freemusic archive website and find three tracks to use in our VT. I’ve chosen Kai Engel ’s three tunes (Hopes and Dreams, Changing Reality, and Oecumene Sleeps).
    3. Now let’s create a ‘sound’ folder inside our ‘vtour’ and paste our music inside it.
    4. Now we have three sound files to play in five panoramas. Say, we want Hopes and Dreams in first two panos, Changing Reality in the third one and, finally, Oecumene Sleeps in the last two panoramas. Let's also add 'ogg' files with the same names for better cross-browser compatibility.

    Regards,

    Alexey

    Edited 2 times, last by Alexey Tkachenko (February 5, 2018 at 9:19 PM).

    Step Two. How will our small plugin work?

    1. First we need to think it over a bit and decide what we do inside the xml and all those actions. One thing we need is to say which pano starts which music. Second thing we need is to know whether the music common for some two panoramas was already started and if yes, then don’t play it, and if there’s another pano with different sound file, then stop playing current music and start new one.
    2. Probably you didn’t know this, but we can add any custom attributes to xml elements. Let’s add ‘music’ attribute to our scenes inside tour.xml file. Let’s take names of sound files as values.
    3. Open ‘tour.xml’ in any editor and add

    music="Kai_Engel_-_05_-_Hopes_and_Dreams" for first two scenes
    music="Kai_Engel_-_06_-_Changing_Reality" for the third scene, and
    music="Kai_Engel_-_08_-_Oecumene_Sleeps for the last two scenes


    The code should go somewhere between scene attributes, e.g.


    Code
    <scene name="scene_5440"
title="5440" music="Kai_Engel_-_08_-_Oecumene_Sleeps"
onstart="" havevrimage="true" >




    4. Now let’s create our small plugin. Fast way is to copy our ‘tour.xml’ to ‘sound’ folder, rename it ‘sound.xml’, then open it in editor and delete everything except <krpano> tags. Now we need to include this file into our main ‘tour.xml’. Open it and at the very top you’ll find the line <include url="skin/vtourskin.xml" /> .This one includes KRpano skin. Copy this line and paste it below (or put cursor on this line and press Ctrl+D to duplicate the line). Change path to our ‘sound.xml’ file. Both lines will look like this:

    Code
    <include url="skin/vtourskin.xml" />
<include url="sound/sound.xml" />

    Step Three. Adding sound interface plugin and checking music parameters.

    1. If you look inside the ‘plugins’ folder, you’ll notice that Krpano Soundinterface plugin is
      already there. Let’s insert it inside our tour.
    2. Open Krpano Soundinterface documentation link and read it carefully.
    3. Copy plugin xml code and paste it inside our ‘sound.xml’ file. (all code must go between <krpano> tags).
    4. Let’s start our tour to see what we’ve done. Launch ‘tour_testingserver.exe’ file and the tour starts, but whoa… There’s an error. We need to adjust paths to the plugin files. It will be:
    Code
    url.flash="%SWFPATH%/plugins/soundinterface.swf"      url.html5="%SWFPATH%/plugins/soundinterface.js"

    for Flash and Html5 respectively.

    1. Another useful thing we can adjust is the ‘rootpath ’ setting so that plugin knows where our music is stored. Write %SWFPATH%/sound/" inside the ‘rootpath’ setting. Note that we write all paths relative to the swf file of the tour, which is very handy.
    2. Let’s reload our tour and see if there’s any errors. Nope!

    Step Four. Checking which music to start when a new pano is loaded.

    1. Now we need to know which music to start inside which panorama. To do so, we need the ‘music’ setting we added to our scenes earlier.
    2. Let’s use the ‘onnewpano ’ event which allows to do something when a new pano was loaded.
    3. Inside our ‘sound.xml’ let’s create a custom event and add some action to it. Note that custom named events must have ‘keep=”true”’ attribute. Let’s name our events “sound_events’ and add ‘onnewpano’ thing inside it. The code is:
    Code
    <events name="sound_events" keep="true" onnewpano="check_sound();" />

    1. Our events call ‘check_sound’ action every time a new pano is loaded. Let’s create an action and do something inside it. But how do we obtain our ‘music’ setting from the current scene? We will need the ‘xml.scene ’ variable. While calling actions we can use any variables and settings as parameters or arguments. That depends on the action scope we use. Let’s create an action and set its scope to local. This is handy because all variables created inside this action will never go outside it and interfere with any other variables with the same name (very useful when you have tons of code and hundreds of variables). Write:
    Code
    <action name="check_sound" scope="local" args="" >       </action>


    Inside xml.

    1. Now let’s pass our ‘music setting’ inside the action as argument. Return to our events and inside action call, inside brackets, write ‘get(scene[get(xml.scene)].music)’. This call obtains the ‘music’ parameter of the currently loaded scene. And inside our action let’s write ‘music’ inside ‘args’ setting and let’s trace if we obtain the value correctly. We need to show Krpano log and trace the value. Write
    Code
    showlog();      trace('current music == ', music);

    inside <action> tags. Let’s reload our tour and see what we get. Hey presto, Krpano traces our music!

    Regards,

    Alexey

    Edited 2 times, last by Alexey Tkachenko (February 5, 2018 at 9:13 PM).

    Step Five. Checking if the current music is already playing and stopping/playing the sound respectively.

    1. Let’s create some variable which will contain info about the current music. We will use if(); conditions in our action. Let’s write the following line inside our action:
    Code
    if(global.nowplaying == 'null', set(global.nowplaying, get(scene[get(xml.scene)].sound)););

    We need global because this variable must be readable outside our action scope, because our action is called repeatedly when new pano is loaded. On the global scope we check if the ‘nowplaying’ is ‘null’ and if yes, set it to value of our music.

    1. Now we need to check if our ‘music’ is equal to the already playing ‘nowplaying’ variable. On the second line of the action write:
    Code
    if(music != nowplaying,                         	stopsound(get(nowplaying));                         	playsound(get(music), calc(music + '.mp3|' + music + '.ogg'), 0);                  );




    What we do here is check if ‘music’ is the same as before and if not, stop current sound and play the next one. Here we use actions from Soundinterface plugin and the very powerful ‘calc(); ’ action.

    1. Let’s reload the tour and see how it works. Whoooaaaa! What’s this? All sounds go together when we switch between panos with different sounds. We forgot to update our ‘nowplaying’ variable after we switched the sound.
    2. Let’s add the following line inside the ‘if();’ condition after the ‘playsound();’ call
    Code
    copy(global.nowplaying, music);

    Our action code now looks like this:

    Code
    <action name="check_sound" scope="local" args="music" >if(global.nowplaying == 'null', set(global.nowplaying, get(scene[get(xml.scene)].music); ););                               	if(music != nowplaying,                         	stopsound(get(nowplaying));                         	playsound(get(music), calc(music + '.mp3|' + music + '.ogg'), 0);                         	copy(global.nowplaying, music);              	);      </action>




    Reload the tour and now we see that it works as we wanted to! Let’s enjoy music in our VT!


    Here's the resulting 'sound.xml' plugin.

    Alexy
    Many thanks for the detailed tutorial which I've attempted to use but failed with the following

    Safari
    Warning: stopsound: no sound with name 'null' found!
    ERROR: Soundinterface Load error: loading failed

    Firefox:
    Warning: stopsound: no sound with name 'null' found!

    ERROR: Soundinterface Load error: Failed loading audio file with status: 404


    I've checked that everything is in place but cannot find the problem...
    JL

    Quote from jl-krp

    Many thanks for the detailed tutorial which I've attempted to use but failed with the following

    Hi!
    Look here. It can help you.
    In vrTourSoft you can add scene sound to each panorama.

    • This feature allows you to add a separate sound to each panorama. For example audio guide..
    • The program converts the original sound into the required file formats (.mp3, .ogg) and copy them on tour.
    • The program add the necessary code to play the sound.
    • It will create a button in the extraskin that will turn the sound on/off. This button will appears only if the sound is exist in the panorama.
    • You can select the number of repeats.



    Read more https://www.vrtoursoft.com/editors/scenesettings.html#sound

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login