You are not logged in.

HTML5-VR Audio Plugin - version 3.1.0 is ready!

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

spacerywirtualne

Professional

  • "spacerywirtualne" started this thread

Posts: 1,111

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

1

Monday, February 1st 2016, 9:46am

HTML5-VR Audio Plugin - version 3.1.0 is ready!

Hi

Version 3.1.1 is ready!

  • A new global volume action: Html5SoundGlobalVolume(Number) - 0.0 - 1.0
  • Now the plugin detects if the browser tab with your project is active, if it is not, then plugin automatically mutes the sound. *thumbup*
  • The Howler core update

...
Version 3.0.0 (build 2017-08-17) is ready! Watch the video:
https://youtu.be/4XjmMcIenm8
...

In the last few projects, we apply our HTML5-VR Audio Plugin.

Surround sound not works on Internet Explorer (no Web Audio Api support) - it works on Edge (WIN 10).

Link to plugin page

Link to the example

Link to the VR example


Note:

Plugin supports mp3 and ogg files. Both files must have the same name and be in the same location.
Setting the angle of listening to a range = 360, the sound is played in a completely new characteristics. - NEW

Documentation - HTML5-VR Audio Plugin ver 2.0 beta1

Most of the functions of this plugin is similar to the Sound Interface Plugin krpano. We worked hard to get the functions that will be similar to Sound Interface Plugin krpano methods.
The Sound Interface plugin extends krpano with actions for playing and controlling sounds directly from xml.
• Plugin allows you to easily add sound objects
• Works only in HTML5 and krpano version min. 1.19-PR3.
• It works in browsers that support the Web Audio API.

Plugin Actions
The HTML5-VR Audio Plugin add its actions directly to the krpano root.
That means the actions can be called like normal krpano actions.
  • playHtml5sound(name, audiofile, loop*, volume*, oncomplete*)
    • plays a sound file
    • name - identification name for the sound
    • audiofile - the path and filename of a sound file without extension
    • loop - true/false (default=false)
    • volume - sound volume (0.0 - 1.0, default=1.0)
    • oncomplete - actions that will be called on complete (*optional)
  • playHtml5sound2D(keep,name, audiofile, rate*,volume*,loops*, onload*,onplay*,onpause*,onstop*,onmute*, oncomplete*)
    • plays a sound file
    • keep - true/false
    • name - unique identification name for the sound
    • audiofile - the path and filename of a sound file without extension
    • rate - playback speed (0.5-4.0, default =1.0) (*optional)
    • volume - sound volume (0.0 - 1.0, default=1.0) (*optional)
    • loops - true/false (default=false) (*optional)
    • onload - actions that will be called on sound loaded (*optional)
    • onplay - actions that will be called if the sound start to play (*optional)
    • onpause - actions that will be called if the sound is paused (*optional)
    • onstop - actions that will be called if the sound is stopped (*optional)
    • onmute - actions that will be called if the sound is muted (*optional)
    • oncomplete - actions that will be called on complete (*optional)
  • playHtml5sound3D(keep,name, audiofile, ath, atv, range, rate*,volume*, loops*, onload*,onplay*,onpause*,onstop*,onmute*, oncomplete*)
    • plays a directional 3D sound at a given spherical position
    • keep - true/false
    • name - unique identification name for the sound
    • audiofile - the path and filename of a sound file without extension
    • ath - horizontal sound source position (-180 .. 180)
    • atv - vertical sound source position (-90 .. +90)
    • range - range of the sound (in degrees, 10-360)
    • rate - playback speed (0.5-4.0, default =1.0) (*optional)
    • volume - sound volume (0.0 - 1.0, default=1.0) (*optional)
    • loops - true/false (default=false) (*optional)
    • onload - actions that will be called on sound loaded (*optional)
    • onplay - actions that will be called if the sound start to play (*optional)
    • onpause - actions that will be called if the sound is paused (*optional)
    • onstop - actions that will be called if the sound is stopped (*optional)
    • onmute - actions that will be called if the sound is muted (*optional)
    • oncomplete - actions that will be called on complete (*optional)
  • playHtml5sound3DHS(keep,name, audiofile, hotspotname, range, rate*,volume*, loops*, onload*,onplay*,onpause*,onstop*,onmute*, oncomplete*)
    • plays a directional 3D sound at a hotspot position
    • when the hotspot moves the sound will follow it
    • name - unique identification name for the sound (use "auto" for an automatic id)
    • audiofile - the path and filename of a sound file
    • hotspotname - name of the hotspot
    • range - range of the sound (in degrees, 10-360)
    • rate - playback speed (0.5-4.0, default =1.0) (*optional)
    • volume - sound volume (0.0 - 1.0, default=1.0) (*optional)
    • loops - true/false (default=false) (*optional)
    • onload - actions that will be called on sound loaded (*optional)
    • onplay - actions that will be called if the sound start to play (*optional)
    • onpause - actions that will be called if the sound is paused (*optional)
    • onstop - actions that will be called if the sound is stopped (*optional)
    • onmute - actions that will be called if the sound is muted (*optional)
    • oncomplete - actions that will be called on complete (*optional)

  • Html5Soundvolume(name,value)
    • volume settings
    • name = identification name of the sound
    • value (0.0-1.0)
  • Html5Soundplay(name)
    • resumes a paused sound
    • name = identification name of the sound
  • Html5Soundpause(name)
    • pauses a sound
    • name = identification name of the sound
  • Html5Soundstop(name)
    • stops playing a sound
    • name = identification name of the sound
  • Html5Soundmute(name)
    • mute the sound
    • name = identification name of the sound
  • Html5Soundrate(name,value)
    • playback speed settings
    • name = identification name of the sound
    • value(0.5-4.0)
  • Html5SoundSetSeek(name,value) - NEW
    • set seek time in second
    • name = identification name of the sound
    • value = in seconds
  • Html5SoundGetSeek(name,variable) - NEW
    • get seek time in second
    • name = identification name of the sound
    • variable = the variable where the result will be stored

    Source code

    		 
    1
2
3
4

    <action name="getseeksound">
  Html5SoundGetSeek(mysoundname, myvar);
  trace('seek in sec: ',get(myvar));
</action>

  • Html5SoundGlobalmute(variable); - NEW
    • global action to MUTE or UNMUTE for the all sounds:
    • variable = true - mute is ON, false - mute is OFF (Boolean)

HTML5 and iOS (iPhone / iPad) Notes
Plugin works fine on iOS, Android.
A sound can't start to play automatically! An user interaction is needed to start playing the sound, e.g. a touch on the screen by the user.

WebVR Notes
Plugin works fine in WebVR mode.
If you use the function playHtml5sound3DHS, your hotspot must be set: distorted = true.
Only this kind of hotspots is supported by VR mode.


More information soon... *cool*



Piotr & Paweł *thumbup*
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

This post has been edited 18 times, last edit by "spacerywirtualne" (Mar 14th 2018, 7:57pm) with the following reason: Plugin update.

jeromebg

Professional

Posts: 1,116

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

2

Monday, February 1st 2016, 12:07pm

GREAT NEWS !
Works perfect on safari, but most interesting part is that it works also on safari IOS, this was the missing part for building great VR experience !
Would you share or sell this plugin ?

Tuur

Sage

Posts: 3,768

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

3

Monday, February 1st 2016, 12:54pm

GREAT!!

Seems to work ok on mac: Safari, chrome, FF

when i look a bit down though the sound seems to be not panning nice from right to left but like a jump in panning.
Not sure when this exactly happens.
But.. GREAT!

playback speed (rate) also very interesting!

Hope Klaus has this all in the update..
Otherwise i like to buy, but please open source in that case. *w00t*

*thumbup*

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

martyhr

Intermediate

Posts: 379

Location: CZ

  • Send private message

4

Monday, February 1st 2016, 1:14pm

yes, nice, works well

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

5

Monday, February 1st 2016, 1:47pm

Nice demo,

I'm also working on this here

still have to develop it more and test more...

And as Tuur said hoping that klaus will implement that in the soundinterface plugin...
everpano.com step beyond 360

This post has been edited 1 times, last edit by "jordi" (Feb 2nd 2016, 1:32pm)

spacerywirtualne

Professional

  • "spacerywirtualne" started this thread

Posts: 1,111

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

6

Tuesday, February 2nd 2016, 11:10am

Thanks Guys :)

We wanted to make a plugin that can be controlled directly from krpano instead of html.

In addition, it must have at least the same functions as a plugin Klaus. For example.
Klaus function looks like this:

Source code

 
1

playsound3D(name, audiofile, ath, atv, range*, volume*, loops*, oncomplete*)  (Flash only)

And our code looks like this:

Source code

 
1

playsound3D(keep, name, audiofile, ath, atv, range, rate*, volume*, loops*, onload*, onplay*, onpause*, onstop*, onmute*, oncomplete*);


Other functions of our plug-in look the same as in the Sound Interface plugin for flash.

Plugin great plays audio on the VR mode. Especially the 3D sound makes a great impression. *thumbsup*

Plugin cost us a lot of work and probably we will share it for a small fee.

Would you like to see VR mode DEMO?

Regards

Piotr i Pawel
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Tuur

Sage

Posts: 3,768

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

7

Tuesday, February 2nd 2016, 12:15pm

Yeahhh *thumbup*

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

spacerywirtualne

Professional

  • "spacerywirtualne" started this thread

Posts: 1,111

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

8

Wednesday, February 3rd 2016, 11:40am

Hi

I built a simple example.

link to HTML5 Sound Plugin VR demo


xml code of tour.xml what I use is below.

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<scene name="scene_012" title="012" pano_dir="012" onstart="load_audio()" thumburl="panos/012.tiles/thumb.jpg" lat="" lng="" heading="">

		<view hlookat="-175.235" vlookat="2.836" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/012.tiles/preview.jpg" />

		<image type="CUBE" multires="true" tilesize="512">
			<level tiledimagewidth="3840" tiledimageheight="3840">
				<cube url="panos/012.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
			</level>
			<level tiledimagewidth="1792" tiledimageheight="1792">
				<cube url="panos/012.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
			</level>
			<level tiledimagewidth="1024" tiledimageheight="1024">
				<cube url="panos/012.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
			</level>
			
		</image>

		<!-- place your scene hotspots here -->
		<hotspot name="spot1" style="skin_hotspotstyle" ath="180" atv="20" linkedscene="scene_p002" />

		<action name="load_audio">
			playHtml5sound2D(false, wyspa, assets/wyspa, 1.0, 0.2, true);
			playHtml5sound3D(false, horn, assets/horn, -176, 0.7, 260, 1.0, 0.1, true);
			playHtml5sound3D(false, waves, assets/waves, -131, 0, 350, 1.0, 0.2, true);
			playHtml5sound3D(false, bar, assets/bar, -19, 3, 290, 1.0, 0.6, true);
			playHtml5sound3D(false, cyklades, assets/cyklades, 69, 3, 210, 1.0, 1.0, true);
		</action>
		
		
	</scene>

	<scene name="scene_p002" title="p002" pano_dir="p002" onstart="load_audio()" thumburl="panos/p002.tiles/thumb.jpg" lat="" lng="" heading="">

		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/p002.tiles/preview.jpg" />

		<image type="CUBE" multires="true" tilesize="512">
			<level tiledimagewidth="2560" tiledimageheight="2560">
				<cube url="panos/p002.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
			</level>
			<level tiledimagewidth="1280" tiledimageheight="1280">
				<cube url="panos/p002.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
			</level>
			<level tiledimagewidth="640" tiledimageheight="640">
				<cube url="panos/p002.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
			</level>
			
		</image>

		<!-- place your scene hotspots here -->
		<hotspot name="spot1" style="skin_hotspotstyle" ath="-59.543" atv="24.261" linkedscene="scene_012" />

		<action name="load_audio">
			playHtml5sound2D(false, loop2d, assets/birds, 1.0, 0.04, true);
			playHtml5sound3D(false, noise, assets/noise, -12, 14, 310, 1.0, 1.0, true);
			playHtml5sound3D(false, bell, assets/bell, -83, 14, 270, 1.0, 0.05, true);
			playHtml5sound3D(false, clock, assets/clock, 143, -22, 270, 1.0, 1.0, true);
		</action>
		
	</scene>


Best regards *thumbsup*

Piotr
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

spacerywirtualne

Professional

  • "spacerywirtualne" started this thread

Posts: 1,111

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

9

Saturday, February 6th 2016, 1:03pm

We added documentation i the first post

link
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

10

Sunday, February 7th 2016, 7:05pm

That's really an awesome plugin ! Congrats !

Taking in care that howler.js can handle sprites of sound, did you considered adding that feature ?

I guess the plugin will be available soon ?
everpano.com step beyond 360

spacerywirtualne

Professional

  • "spacerywirtualne" started this thread

Posts: 1,111

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

11

Monday, February 8th 2016, 12:36pm

Hello :)

Quoted from "jordi"

Taking in care that howler.js can handle sprites of sound, did you considered adding that feature ?
Hovler has many additional features. If the plugin will be popular we are sure to add them. Sprites of sound also. Although this is a static method for adding sound. In our plugin sound is added dynamically.
We did not want to give a huge amount of features in the first version. We want to a simple-to-use plugin. In further steps we plan to add new features.


Quoted from "jordi"

I guess the plugin will be available soon ?

Yes. Today or tomorrow we will give all the information.
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

12

Monday, February 8th 2016, 12:50pm

Great !! *thumbsup*
everpano.com step beyond 360

Tuur

Sage

Posts: 3,768

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

13

Monday, February 8th 2016, 1:03pm

Great +1 !

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

spacerywirtualne

Professional

  • "spacerywirtualne" started this thread

Posts: 1,111

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

14

Wednesday, February 10th 2016, 2:17pm

Hello :)

In the first post we added link to the store.

Regards
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Tuur

Sage

Posts: 3,768

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

15

Wednesday, February 10th 2016, 3:14pm

Great!
Can't wait to test.
Could be also great add for my moving hotspots :-)
*thumbup*


EDIT: scene and tour skin are encrypted.. so it is not possible to see how to use.!!

When i read the license file.. So, i can not use this for my clients?

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

This post has been edited 2 times, last edit by "Tuur" (Feb 10th 2016, 3:38pm)

spacerywirtualne

Professional

  • "spacerywirtualne" started this thread

Posts: 1,111

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

16

Wednesday, February 10th 2016, 3:40pm

Quoted from "Tuur"

EDIT: scene and tour skin are encrypted.. so it is not possible to see how to use.!!
Of course it's my mistake - I'm sorry. *cry*
Demo from the shop should not be encrypted, of course. In a moment I'll send you the files.

Piotr
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Tuur

Sage

Posts: 3,768

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

17

Wednesday, February 10th 2016, 3:42pm

*thumbsup* *thumbsup*

Always great service from my 'for long time' krpano friends.

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

spacerywirtualne

Professional

  • "spacerywirtualne" started this thread

Posts: 1,111

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

18

Wednesday, February 10th 2016, 3:50pm

Quoted from "Tuur"

Could be also great add for my moving hotspots :-)
I thought about the same *thumbup*

Quoted from "Tuur"

Always great service from my 'for long time' krpano friends.
Thank you *smile*

Piotr
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

jeromebg

Professional

Posts: 1,116

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

19

Wednesday, February 10th 2016, 5:46pm

PLEASE READ THIS LICENSE AGREEMENT CAREFULLY BEFORE DOWNLOADING OR USING THE SOFTWARE.

Difficult to do without buying the plugin...

jeromebg

Professional

Posts: 1,116

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

20

Wednesday, February 10th 2016, 9:57pm

Hum, after a quick test I must say I'm a bit disappointed:
If no ogg file then firefox won't play the mp3 file (firefox supports mp3 normally)
If you try with a stereo sound it looks it only changes volume but doesn't pan the left/right channels.
Even with very high range (320 for example) sound is audible in a very short fov, like if falloff was calculated from right screen ath to leftscreen ath and not centerscreen , am I wrong ?
You should also add rangefalloff outofrangevolume like for video plugin to be able to have an ambiant directional sound wich won't mute but only falloff when back.

Similar threads