Overview

This tutorial has been developed in response to a question posed on the Pano2VR forum as follows;

I would like to insert a sound only to some panoramas in sequence. The other panoramas of the tour must be without sound. The sound should not start again with each panorama of the sequence but continue from the previous one.

Updated: 23 March 2019 to work within the auto play restriction implemented by Google for the Chrome browser

The following are step-by-step instructions on how to add a ‘Background’ sound and have it play across defined nodes of the tour. At the end of the tutorial the final output will be the same as the example below.

Final Output

Tutorial Files

In the tutorial folder, Bg_Sound_Nodes, there is an Asset Folder with 4 equirectangular images, an .mp3 file, a css folder with a buttons.css file and a button.html file. There is also a Project folder with a Pano2VR project 'bg_sound_node.p2vr', a skin 'bg_sound_node.ggsk' and an Output folder called 'Bg_Sound_Nodes' with project files created from the .p2vr and .ggsk elements. (Figure #1)

Project Overview

In this tutorial we will modify the ‘bg_sound_nodes.p2vr’ project and skin by;

Defining the Nodes that will play the background sound
Adding a Background Sound to the project
Add a CSS file to the project and create a ‘Click to Start’ button to work around current browser restrictions on autoplay media
Adding a simple ‘previous/next’ navigation element that triggers the audio

Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image to enlarge it

Getting Started

1. Download the zipped tutorial folder here

Note: Once you have downloaded the zip file and extracted it you can view the project by right click on the index.html file and opening it in Firefox

2. Double Click to open the tutorial Pano2VR project file bg_sound_nodes.p2vr (Figure #1)

Figure #1: Pano2VR tutorial project opened in Pano2VR V6beta4

Defining the nodes that will play audio

1. If it’s not already highlighted, click on the first (yello) panorama (node #1) to make it the active node and select ‘User Data’ from the Edit: menu to open the parameters panel. (Figure #2)

2. Scroll down to the Tags: section and in the text field type the word ‘sound’; then select return, on the keyboard, to add it to the node (Figure #3)

3. Click on the ‘Tag Stamp’ icon and select the tag ‘sound’ to load it into the stamp (Figure #4)

Note: in this tutorial the 1st and 3rd nodes will seamlessly play the background audio. No audio will play in the 2nd and 4th nodes.

6. Use the ‘Tag Stamp’ to add the ‘sound’ tag to the 3rd node by hovering over the node and mouse clicking (Figure #5)

Note: to exit stamp mode click on the red circle with a slash icon

Adding a Background Sound

1. Click on the first (yellow) panorama (node #1) to make it the active node and select ‘Properties’ from the Edit: menu to open the parameters panel. (Figure #6)

2. In the ‘Background Sound:’ panel, ’click’ on the Background Sound/File: ‘folder icon’ and navigate to the Tutorial folder and select the ‘voiceOver.mp3’ file from the Assets folder, click on ‘Open’ to add it to the project (Figure #7)

Figure #7: Selecting the background sound

Note: I’ve chosen this particular audio clip as it has a great deal of talking and it’s easy to hear when the sound restarts

3. In the ‘Background Sound:’ panel set the Level: to ‘0.60’ and the Loop to ‘-1’ (Figure #8)

Note: this sets the volume at 60% and -1 stops the audio from auto starting

Adding the CSS file and Button

1. In the Output window open the HTML panel and click on the ‘HTML Template button’ to open the ‘HTML Template’ window. Add the CSS file by clicking on ‘Open…’ next to the field ‘Include external CSS file:’(Figure #9)

2. Navigate to the Tutorial Folder/Assets/css folder and select ‘button.css’ ,click on ‘Open’ to add it to the project (Figure #10)

3. Click on ‘OK’ to update the Template

4. Click on the ‘Edit Skin button’ to open the ‘bg_sound_nodes’ skin (Figure #11)

5. In ‘Properties/Variables panel’ double click in the empty ‘Variables field’ to create a new variable using the following parameters;

Name = ‘setAudio’ | Type = ‘True/False’ | Init Value = ‘false’ (Figure #12)

Note: we will use this variable to show/hide the CSS button and the ‘previous/next’ controls

6. From the Skin menu click on the ‘Draw Text Field icon’ to make it active and click once in the ‘canvas’ to create a new ‘Text Field’ element (Figure #13)

Figure #13: Create new ‘Text Field’ element

7. With the new text field, ‘Text 1’, selected in the ‘Properties/Position panel’ set the ‘ID:’ name to ‘click-to-start’ and in ‘Anchor:’ set the ‘anchor’ to the center (Figure #14)

Figure #14: Set element ID name and Anchor position

8. With the ‘click-to-start’ element still selected, ‘right click’ on the element in the canvas and from the dropdown menu click on both ‘Center element in Canvas - Horizontal’ and ‘Center element in Canvas - Vertical’ to center the element in the canvas (Figure #15)

9. With the ‘click-to-start’ element still selected, scroll down to the ‘Properties/Rectangle’ panel and set the following properties;

‘Background: Enabled:’ to ‘unchecked’ to remove the background
‘Border: Width:’ to ‘0’ to remove the outline (Figure #16)

10. With the ‘click-to-start’ element still selected, scroll down to the ‘Properties/Text’ panel and set the following properties;

Add the following ‘html’ code to the ‘Text: field’
<div id="css" class="button big green">Click to Start</div>
‘Align:’ check ‘Auto Size’
‘Align:’ uncheck ‘Scroll Bar’ (Figure #17)

11. With the ‘click-to-start’ element still selected, scroll down to the ‘Properties/Actions’ panel and add two new actions;

Note: to add a new action double click anywhere in an empty action field or click on the ‘+’ Add Action button at the right hand side of the action field and the Action Settings window opens.

Source = ‘Mouse Click’ | Action = ‘Set Variable Value’ | Variable Name: = ‘setAudio’ | Operation: = ‘Set(=)’ | Value = ‘true’

and

Source = ‘Mouse Click’ | Action = ‘Media’ | Type = ‘Play Media’ | Target = ‘_background’ (Figure #18)

Note: by setting the ‘setAudio’ variable to true we can use it to manage the visibility of the CSS button. As we don’t want the audio to play on Node 1 we add in a ‘Pause Media’ action

14. Select ‘Draw Rectangle’ and click once in the ‘canvas’ to create a new ‘Rectangle’ that we will configure as a screentint to stop interaction with the panorama (Figure #19)

Figure #19: Adding a rectangle to the skin

15. With the new rectangle, ‘Rectangle 1’ selected, in the ‘Properties/Position’ panel and set the following properties;

‘ID:’ set the name to ’screentint’
‘Position:’ set the ‘X’ and ‘Y’ to 0.00 percent.
‘Size:‘ set the ‘Width:’ and ‘Height:’ to 100.00 percent. (Figure #20)

16. With the ‘screentint’ element still selected, scroll down to ‘Properties/Rectangle’ panel and set the following properties;

‘Background: Enabled:’ checked
‘Background Color:’ Red: 0 | Green: 0 | Blue 0 | Alpha Channel: 100
‘Border: Width:’ 0 (Figure #21)

17. Shift select both the ‘screentint’ and ‘click-to-start’ elements. Click on the menu item ‘Basics: Draw Container’ and click once in the canvas to apply the container to the selected elements (Figure #22)

Figure #22: Container 1 with child elements ‘click-to-start’ and ‘screentint’

18. With the ‘Container1’ element still selected, go to the ‘Properties/Position’ panel and set the following properties;

ID: set the name to ‘start-button’
Anchor: set the anchor to the center
Size: set Width: & Height: to 100% (Figure #23)

19. With the ‘start-button’ element selected scroll down to the ‘Properties/Appearance’ panel and create a new logic block by clicking on the ‘logic block icon’ next to ‘Visible:’ Set the following properties;

Add a new Trigger = variable *setAudio’ | Comparison = ‘=’ | Value = ‘True’ | Visible: = ‘False’

Select OK to confirm the logic block. (Figure #24)

20. Save the skin and Output the project

Note: clicking on the button hides the button and skin, triggers and plays the audio. New restrictions by Google restrict auto play of audio and video without an initial click to start the media.

Previous/Next Navigation

Note: the next step is to add some navigation elements so we can move between nodes of the tour. These navigation elements also contain actions that play and pause the audio

1. Open the Skin if it’s not already open. Click on the ‘Components Toolbox icon’ in the main menu to open the ‘Components Toolbox’ window.

In the ‘Built-In’ category locate the ‘Next/Previous’ Simplex component. (Figure #25)

Figure #25: Component toolbox and the Next/Previous component

2. Double click on the component to add it to the skin. Close the Components Toolbox (Figure #26)

Figure #26: Next/Previous component added to the skin

2. With the ‘button_next_previous’ container selected, go to the ‘Properties/Appearance’ panel and set the following properties;

uncheck ‘Visible:’

Create a new logic block by clicking on the ‘logic block icon’ next to ‘Visible:’

Add a new Trigger = variable *setAudio’ | Comparison = ‘=’ | Value = ‘True’ Visible: = ‘True’

Note: by setting this logic block the navigation will only show up once the start button has been mouse clicked.

Select OK to confirm the logic block (Figure #27)

Figure #27: Button_next_previous logic block

3. Select the ‘Pano Next’ element and scroll down to the ‘Properties/Actions’ panel and add a new action with the following properties;

Source = ‘Mouse Click’ | Action = ‘Media’ | Type: = ‘Play Media’ | Loop: = ‘1’ | Target = ‘_background’

then click on the ‘Action Filter’ button to open the ‘Action Filter’ window and set the following properties;

Trigger = Tour (Pro)/= ’Tags’ | Comparison = ‘contain’ | Value = ’sound’

Click OK to set the Action Filter and click OK to set the Action Settings. (Figure #28)

Note: A small asterisk will appear next to the Action indicating a filter has been added. This filter will only allow the Action to execute if the panorama has the ‘sound’ tag applied to it.

Figure #28: Play Media Action and Filter added

4. With the ‘Pano Next’ element still selected add a new action with the following properties;

Source = ‘Node Changed’ | Action = ‘Media’ | Type = ‘Pause Media’ | Target = ‘_background’

Note; What we are doing here is to always pause the background audio on a Node change and use the previous action to restart it if the new node has the Tag ‘sound’

Shift click to highlight the new Actions created in step #3 & 4. Right click on them and select ‘Copy’. (Figure #28)

5. Select the ‘Pano Prev’ element and scroll down to the Actions Panel. Right click in an empty Action field and select ‘Paste’ to add the two actions. (Figure #29)

7. Save and Close the skin. Output the project.

Note: Now the navigation arrows appear when you click on the CSS button, selecting the next arrow, to open node 2, starts the audio when the node opens and when you click again to go to node 3 the audio keeps playing from the same point. Click again to go to node 4 and the audio stops. Click previous to go back to node 3 and the audio starts up from where you left off.

Update: 1/11/18 a new tutorial, Background Sound Playing across Specific Nodes - Volume Control & Pause, has been published that builds on the work done here and adds a ‘Pause’ button and a ‘Volume’ button to the skin.

Summary

I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.

I'd like to Donate