Sie sind nicht angemeldet.

HTML5-VR Audio Plugin - version 3.1.0 is ready!

spacerywirtualne

Profi

  • »spacerywirtualne« ist der Autor dieses Themas

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

1

Montag, 1. Februar 2016, 09:46

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

    Quellcode

    		 
    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*

Dieser Beitrag wurde bereits 18 mal editiert, zuletzt von »spacerywirtualne« (14. März 2018, 19:57) aus folgendem Grund: Plugin update.

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

2

Montag, 1. Februar 2016, 12:07

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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

3

Montag, 1. Februar 2016, 12:54

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

Fortgeschrittener

Beiträge: 387

Wohnort: CZ

  • Nachricht senden

4

Montag, 1. Februar 2016, 13:14

yes, nice, works well

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

5

Montag, 1. Februar 2016, 13:47

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »jordi« (2. Februar 2016, 13:32)

spacerywirtualne

Profi

  • »spacerywirtualne« ist der Autor dieses Themas

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

6

Dienstag, 2. Februar 2016, 11:10

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:

Quellcode

 
1

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

And our code looks like this:

Quellcode

 
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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

7

Dienstag, 2. Februar 2016, 12:15

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

Profi

  • »spacerywirtualne« ist der Autor dieses Themas

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

8

Mittwoch, 3. Februar 2016, 11:40

Hi

I built a simple example.

link to HTML5 Sound Plugin VR demo


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

Quellcode

 
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

Profi

  • »spacerywirtualne« ist der Autor dieses Themas

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

9

Samstag, 6. Februar 2016, 13:03

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

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

10

Sonntag, 7. Februar 2016, 19:05

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

Profi

  • »spacerywirtualne« ist der Autor dieses Themas

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

11

Montag, 8. Februar 2016, 12:36

Hello :)

Zitat von »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.


Zitat von »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

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

12

Montag, 8. Februar 2016, 12:50

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

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

13

Montag, 8. Februar 2016, 13:03

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

Profi

  • »spacerywirtualne« ist der Autor dieses Themas

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

14

Mittwoch, 10. Februar 2016, 14:17

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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

15

Mittwoch, 10. Februar 2016, 15:14

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

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Tuur« (10. Februar 2016, 15:38)

spacerywirtualne

Profi

  • »spacerywirtualne« ist der Autor dieses Themas

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

16

Mittwoch, 10. Februar 2016, 15:40

Zitat von »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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

17

Mittwoch, 10. Februar 2016, 15:42

*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

Profi

  • »spacerywirtualne« ist der Autor dieses Themas

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

18

Mittwoch, 10. Februar 2016, 15:50

Zitat von »Tuur«

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

Zitat von »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

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

19

Mittwoch, 10. Februar 2016, 17:46

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

Difficult to do without buying the plugin...

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

  • Nachricht senden

20

Mittwoch, 10. Februar 2016, 21:57

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.

Ähnliche Themen