HTML5-VR Audio Plugin - version 3.1.0 is ready!

spacerywirtualne · February 1, 2016 at 9:46 AM

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

Piotr & Paweł

jeromebg · February 1, 2016 at 12:07 PM

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 · February 1, 2016 at 12:54 PM

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.

Tuur

martyhr · February 1, 2016 at 1:14 PM

yes, nice, works well

jordi · February 1, 2016 at 1:47 PM

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

spacerywirtualne · February 2, 2016 at 11:10 AM

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:

Code

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

And our code looks like this:

Code

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.

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

Tuur · February 2, 2016 at 12:15 PM

Yeahhh

Tuur

spacerywirtualne · February 3, 2016 at 11:40 AM

Hi

I built a simple example.

link to HTML5 Sound Plugin VR demo

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

Code

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

Display More

Best regards

Piotr

spacerywirtualne · February 6, 2016 at 1:03 PM

We added documentation i the first post

link

jordi · February 7, 2016 at 7:05 PM

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 ?

spacerywirtualne · February 8, 2016 at 12:36 PM

Hello :)

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

Quote from jordi

I guess the plugin will be available soon ?

Yes. Today or tomorrow we will give all the information.

jordi · February 8, 2016 at 12:50 PM

Great !!

Tuur · February 8, 2016 at 1:03 PM

Great +1 !

Tuur

spacerywirtualne · February 10, 2016 at 2:17 PM

Hello :)

In the first post we added link to the store.

Regards

Tuur · February 10, 2016 at 3:14 PM

Great!
Can't wait to test.
Could be also great add for my moving hotspots

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

spacerywirtualne · February 10, 2016 at 3:40 PM

Quote 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.
Demo from the shop should not be encrypted, of course. In a moment I'll send you the files.

Piotr

Tuur · February 10, 2016 at 3:42 PM

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

Tuur

spacerywirtualne · February 10, 2016 at 3:50 PM

Quote from Tuur

Could be also great add for my moving hotspots

I thought about the same

Quote from Tuur

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

Thank you

Piotr

jeromebg · February 10, 2016 at 5:46 PM

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

Difficult to do without buying the plugin...

jeromebg · February 10, 2016 at 9:57 PM

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.

Participate now!