html5 audio play/pause button

Intermediate

Monday, December 26th 2011, 8:56pm

I am looking for a quick fix workaround to get audio on iPad with v.12
Does anyone know if there is a way to call the html5 audio feature from inside the tour using a play/pause button? The html5 audio controls are obscure on the iPad (small and poorly placed) and they interfere with the page layout when visible.
Thanks,
Tony

Go to the top of the page

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

2

Tuesday, December 27th 2011, 12:45am

Yes, see here.

http://krpano.com/plugins/soundinterface/#top

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Go to the top of the page

nefar1ous

Intermediate

Posts: 190

3

Tuesday, December 27th 2011, 6:16am

There is no code or help here for calling the HTML5 Audio Component from within the tour... only explanations of what maybe can or can't be done with the soundinterface or soundobject in HTML5 and iOS (iPhone / iPad) - or at least I can't find anything.
I can get the audio in my HTML page to work no problem, and even have the controls for it (tacky), but even if I choose to go the route of HTML5 audio controller, it's so small at the top of the screen on iPad that you can barely see it and it does not conform with my tour at all.

What I'm looking for is something like this:
An intro image comes on screen.
Once clicked, it goes away and turns on the HTML5 Audio Component
After that, users can control the HTML5 Audio Component from WITHIN the tour using Play/Pause button.

Thx

Go to the top of the page

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

4

Tuesday, December 27th 2011, 8:28am

That page details the functions you can call. To do what you describe you'll need to learn a bit a krpano and actions. To get started try looking at the examples that came with krpano.

http://krpano.com/plugins/soundinterface/#actions

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

This post has been edited 1 times, last edit by "sachagriffin" (Dec 27th 2011, 4:49pm)

Go to the top of the page

nefar1ous

Intermediate

Posts: 190

5

Wednesday, December 28th 2011, 7:45am

Hi Sachagriffin,
You've been a great help to me before, so please don't take this the wrong way.

I'm not a programmer, but I have been using krpano for nearly a year now. I do understand the actions (for the most part) and have used them extensively, having created many many custom tours for various businesses and persons. This must be a case of either I'm missing something in what you are trying to show me, or you're missing my point. I find that when I stumble upon something new which I don't understand, I try to find a solution. When I can't find a solution, I ask for help. That said, I wasn't looking for finger pointing. I realize you are likely quite busy and would prefer to just say "Hey, go look here!" And in most cases, that would be enough and I could find a solution... but I'm not seeing it... sorry.

You said to look at the actions and examples on "this" page, but don't the actions listed therein call upon the soundinterface.swf and sound objects of the krpano Flash Player itself and not on the built in audio component of HTML5? I am looking to control the HTML5 audio player that can be used on my webpage (the one that is there even if there is not a tour embedded on the page), not the krpano sound interface. When the below code is placed on my html page, a media controller goes in the top left corner of my page... along with a long black bar that extends from one side to the other. But I don't want that. I just thought there might be a way to control it using the krpano player. Maybe I'm just jumping through hoops here and need to redo my tour for v.14 and this problem will go away and kill any need for a quick workaround.

I've looked all over the actions and instructions here and no where can I found anything that controls this:

Source code

<!DOCTYPE html>
<html>
<head>
.........
</head>
<body>
<audio controls="controls" autoplay="autoplay">
  <source src="music/chant.mp3" type="audio/mp3" />
</audio> 
----------
</body>
</html>

Go to the top of the page

Nupsi

Professional

Posts: 697

6

Wednesday, December 28th 2011, 9:19am

As far as I know there is no built in-audio component in krpano player for HTML5. There is an external file called "soundinterface.js" for HTML5. Instead of calling the soundinterface.swf as you usually do, just call the soundinterface.js and use the soundinterface-actions as usual. But all that is well documented too and is anything anyone need to get started. And if you run into some coding problems we are here willing to help. Oh...and I´m no programmer either ;-)

Best regards
Nupsi

Go to the top of the page

nefar1ous

Intermediate

Posts: 190

7

Wednesday, December 28th 2011, 2:50pm

Thanks Nupsi, I was starting to kick myself in the butt today after I left for a job and I realized what I was looking for was probably in the .js file. Only I was looking for a shortcut to get past that because I have been having trouble getting it to work.

Is the .js file only compatible with krpano v.14, or is it also supposed to be compatible with v.12 (1.0.8.12)? Do you know? Sachagriffin had a look at my code before I removed the "alturl" and he thought everything looked ok, but alas, it wasn't working. I tried with the new version of .js and the older version according to a 1.0.8.12 bug fix, so I was thinking it should be compatible with v.12 It keeps looking like I need to just bite the bullet and redo my tour in v.14 for this customer. It can't be all that difficult of a transition.

Peace & Cheers for the New Year!

Tony

Go to the top of the page

Jarredja

Professional

Posts: 1,058

Location: LA

8

Wednesday, December 28th 2011, 3:00pm

Tony,

the upgrade should just consist of changing the .js and .swf files. There is an update tool that automatically saves your old files and updates to the new files. Check out the tools package. Of course, you might need to replace plugins such as editor.swf if you use it. It usually needs to match the .swf release.

Jarred

Go to the top of the page

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

9

Wednesday, December 28th 2011, 4:13pm

I thought I saw this little snippet was code when you gave up on soundinterface.js and removed it. That audio player shouldn't be there at ALL. The soundinterface.js handles it's creation and use.
Now I think I see the problem. Your installed version was 2010-11-24. HOLY CRAP. I looked too fast at the version and thought you had the latest installed which is 2011-11-24 I believe.
That was a whole year ago.

For the best way to achieve solutions rapidly. A generic guide I've been thinking about.

1. Install the latest version of all swfs, and js's.
2. Read the documentation again.
3. Check out how working tours handle the situation.
4. Simply your problem by reducing your tour the least amount of elements in which you can still showcase your bug.
5. Think about your issue in the shower.
6. Ask for help in English or translated by someone that speaks English very well. Detailing, what you are trying to achieve, why you think it doesn't work, and a working link to your tour.
7. Failing all these steps, ask Klaus.

I think step 1 is where you need to go.
Also, you should always have at least two environments when developing.. A development version and a production version.. So you can muck about without causing interruptions to a live tour. Also you can turn off errors on the js version, I think its showerrors=false. Getting soundinterface up and running is a piece of cake one you've satisfied the requirements for it to work in the first place.

The plugin

	Source code
1	<plugin name="soundinterface" url="%SWFPATH%/plugins/soundinterface.swf" alturl="%SWFPATH%/plugins/soundinterface.js" volume="1.0" preload="true"/>

Playing, you can call this action anywhere you want.
More actions
http://krpano.com/plugins/soundinterface/#actions

You can create buttons with onclick attributes to attach to all these actions to take full control over the player. Good luck buddy.

	Source code
1	playscenesound(1189,%SWFPATH%/director/lasbovedas.mp3);

Quoted from "nefar1ous"
Hi Sachagriffin,
You said to look at the actions and examples on "this" page, but don't the actions listed therein call upon the soundinterface.swf and sound objects of the krpano Flash Player itself and not on the built in audio component of HTML5? I am looking to control the HTML5 audio player that can be used on my webpage (the one that is there even if there is not a tour embedded on the page), not the krpano sound interface. When the below code is placed on my html page, a media controller goes in the top left corner of my page... along with a long black bar that extends from one side to the other. But I don't want that. I just thought there might be a way to control it using the krpano player. Maybe I'm just jumping through hoops here and need to redo my tour for v.14 and this problem will go away and kill any need for a quick workaround.

I've looked all over the actions and instructions here and no where can I found anything that controls this:
Source code
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
.........
</head>
<body>
<audio controls="controls" autoplay="autoplay">
  <source src="music/chant.mp3" type="audio/mp3" />
</audio> 
----------
</body>
</html>

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Go to the top of the page

nefar1ous

Intermediate

Posts: 190

10

Thursday, December 29th 2011, 8:00pm

updated to krpano 1.0.8.14

Well, I bit the bullet and updated the problem tour to the latest version of krpano and most everything is well now. I am having a hiccup with starting the audio though. I have it set to begin after "touching" an intro image that disappears and calls the playsound. Thought this would be enough to get the sound started with a user event. But it doesn't actually start until I touch the screen again. Must be something in the .js ??? If nobody has experience with this here, I may start a new thread.
Thanks to all.
And thanks Jarred for the tools advice. Haven't run into that yet.