Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

  • »Alexey Tkachenko« ist der Autor dieses Themas

Beiträge: 732

Wohnort: Sevastopol, Crimea, Russian Federation

Beruf: Interpreting, Building virtual tours

  • Nachricht senden

1

Montag, 5. Februar 2018, 20:42

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

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Alexey Tkachenko« (5. Februar 2018, 21:19)


  • »Alexey Tkachenko« ist der Autor dieses Themas

Beiträge: 732

Wohnort: Sevastopol, Crimea, Russian Federation

Beruf: Interpreting, Building virtual tours

  • Nachricht senden

2

Montag, 5. Februar 2018, 20:44

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.


Quellcode

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:

Quellcode

1
2
<include url="skin/vtourskin.xml" />
<include url="sound/sound.xml" />
Regards,

Alexey

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Alexey Tkachenko« (5. Februar 2018, 21:23)


  • »Alexey Tkachenko« ist der Autor dieses Themas

Beiträge: 732

Wohnort: Sevastopol, Crimea, Russian Federation

Beruf: Interpreting, Building virtual tours

  • Nachricht senden

3

Montag, 5. Februar 2018, 20:52

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:

Quellcode

1
 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!
Regards,

Alexey

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Alexey Tkachenko« (5. Februar 2018, 21:24)


  • »Alexey Tkachenko« ist der Autor dieses Themas

Beiträge: 732

Wohnort: Sevastopol, Crimea, Russian Federation

Beruf: Interpreting, Building virtual tours

  • Nachricht senden

4

Montag, 5. Februar 2018, 21:00

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:

Quellcode

1
<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:

Quellcode

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

Quellcode

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

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Alexey Tkachenko« (5. Februar 2018, 21:13)


  • »Alexey Tkachenko« ist der Autor dieses Themas

Beiträge: 732

Wohnort: Sevastopol, Crimea, Russian Federation

Beruf: Interpreting, Building virtual tours

  • Nachricht senden

5

Montag, 5. Februar 2018, 21:04

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:

Quellcode

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

Quellcode

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

Quellcode

1
copy(global.nowplaying, music);


Our action code now looks like this:

Quellcode

1
<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« hat folgende Datei angehängt:
  • sound.xml (711 Byte - 41 mal heruntergeladen - zuletzt: 31. Oktober 2018, 07:57)
Regards,

Alexey

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Alexey Tkachenko« (5. Februar 2018, 21:16)


  • »Alexey Tkachenko« ist der Autor dieses Themas

Beiträge: 732

Wohnort: Sevastopol, Crimea, Russian Federation

Beruf: Interpreting, Building virtual tours

  • Nachricht senden

6

Montag, 5. Februar 2018, 21:07

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

7

Sonntag, 11. Februar 2018, 04:47

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*