Example-Tutorial -- Play different music inside different panos

Alexey Tkachenko

Professional

Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

1

Monday, February 5th 2018, 8:42pm

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:

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).
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).
Now let’s create a ‘sound’ folder inside our ‘vtour’ and paste our music inside it.
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

This post has been edited 2 times, last edit by "Alexey Tkachenko" (Feb 5th 2018, 9:19pm)

Go to the top of the page

Alexey Tkachenko

Professional

Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

2

Monday, February 5th 2018, 8:44pm

Step Two. How will our small plugin work?

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.
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.
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.

	Source code
1 2 3	<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:

	Source code
1 2	<include url="skin/vtourskin.xml" /> <include url="sound/sound.xml" />

Regards,

Alexey

This post has been edited 1 times, last edit by "Alexey Tkachenko" (Feb 5th 2018, 9:23pm)

Go to the top of the page

Alexey Tkachenko

Professional

Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

3

Monday, February 5th 2018, 8:52pm

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

If you look inside the ‘plugins’ folder, you’ll notice that Krpano Soundinterface plugin is
already there. Let’s insert it inside our tour.
Open Krpano Soundinterface documentation link and read it carefully.
Copy plugin xml code and paste it inside our ‘sound.xml’ file. (all code must go between <krpano> tags).
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:

	Source code
1	url.flash="%SWFPATH%/plugins/soundinterface.swf" url.html5="%SWFPATH%/plugins/soundinterface.js"

for Flash and Html5 respectively.

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.
Let’s reload our tour and see if there’s any errors. Nope!

Regards,

Alexey

This post has been edited 1 times, last edit by "Alexey Tkachenko" (Feb 5th 2018, 9:24pm)

Go to the top of the page

Alexey Tkachenko

Professional

Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

4

Monday, February 5th 2018, 9:00pm

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

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.
Let’s use the ‘onnewpano ’ event which allows to do something when a new pano was loaded.
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:

	Source code
1	<events name="sound_events" keep="true" onnewpano="check_sound();" />

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:

	Source code
1	<action name="check_sound" scope="local" args="" > </action>

Inside xml.

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

	Source code
1	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

This post has been edited 2 times, last edit by "Alexey Tkachenko" (Feb 5th 2018, 9:13pm)

Go to the top of the page

Alexey Tkachenko

Professional

Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

5

Monday, February 5th 2018, 9:04pm

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

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:

	Source code
1	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.

Now we need to check if our ‘music’ is equal to the already playing ‘nowplaying’ variable. On the second line of the action write:

	Source code
1	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.

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.
Let’s add the following line inside the ‘if();’ condition after the ‘playsound();’ call

	Source code
1	copy(global.nowplaying, music);

Our action code now looks like this:

Source 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.

Alexey Tkachenko has attached the following file:

sound.xml (711 Byte - 230 times downloaded - latest: Today, 6:38am)

Regards,

Alexey

This post has been edited 2 times, last edit by "Alexey Tkachenko" (Feb 5th 2018, 9:16pm)

Go to the top of the page

Alexey Tkachenko

Professional

Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

6

Monday, February 5th 2018, 9:07pm

P.S.
However, on Android there will be some problems using this code, because now
Android launches any sound only after some click event. We will come to this a
bit later and try to update our code for Android.

Regards,

Alexey

Go to the top of the page

Jook

Beginner

Posts: 8

7

Sunday, February 11th 2018, 4:47am

Adding a on/off Sound switch?

Thank you for the sample tutorial. Works great. I wondering if a sound switch can be added to pause the music. *smile*

Go to the top of the page

jl-krp

Intermediate

Posts: 154

Location: Bath

Occupation: Panographer - hobby and commercial

8

Sunday, February 2nd 2020, 2:05pm

Sound interface load error

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

Go to the top of the page

vrTourSoft

Trainee

Posts: 70

Occupation: Software development

9

Monday, February 3rd 2020, 6:27pm

Quoted from "jl-krp"

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

Quoted from "jl-krp"

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

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.

vrTourSoft - Simple is better than Hard. Standalone WYSIWYG editor and development environment for krpano
https://www.vrtoursoft.com/

Go to the top of the page