Background Sound Playing across Specific Nodes

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.

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)

 

Figure #1: Tutorial folder

 

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 V5 or V6 beta 4

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. Click on the second (green) panorama (node #2) to make it the active node and select ‘User Data’ from the Edit: menu to open the parameters panel. (Figure #2)

 

Figure #2: Second panorama selected and User Data panel open

 

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)

 

Figure #3: Sound tag created for node #2

 

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

 

Figure #4: Tag Stamp loaded with the tag ‘sound’

 

Note: in this tutorial the 2nd and 3rd nodes will seamlessly play the background audio. No audio will play in the 1st 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)

 
 Figure #5: Using the Tag Stamp to add the ‘sound’ tag

Figure #5: Using the Tag Stamp to add the ‘sound’ tag

 

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)

 

Figure #6: Node 1 selected and Properties Panel open

 

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)

 

Figure #8: Background sound parameters

 

Note: this sets the volume at 60% and 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)

Figure #9: HTML Template window

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

Figure #10: Open buttons.css

3. Click on ‘OK’ to update the Template

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

 

Figure #11: Edit Skin button

 

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)

 

Figure #12: Create new ‘setAudio’ variable

 

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)

 

Figure #15: Center the element in the canvas

 

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)

 

Figure #16: Remove background and outline

 

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)

 

Figure #17: CSS code to create the start button

 

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 = ‘Pause Media’ | Target = ‘_background’ (Figure #18)

Figure #18: Setting Mouse Click actions

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)

 

Figure #20: Renaming and setting the rectangle to fill the screen

 

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)

 

Figure #21: Set the element background color and border

 

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)

 

Figure #23: Set Container 1 ID, Anchor and Size

 

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)

Figure #24: Create visible logic block

20. Save the skin and Output the project

Note: clicking on the button hides the button and skin, triggers and pauses the audio. In this example it’s paused because we only want it to play on nodes 2 & 3.

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)

 

Figure #28: Shift select both actions, rt click and select copy

 

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)

 

Figure #29: Paste the actions into the ‘Pano Prev’ elements Actions

 

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

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

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia