Start a new topic

multiple audio into Content of POI detail page

multiple audio into Content of POI detail page


Hello  wikitude team,

 

I would like your help to solve a problem:

In 5_BrowsingPois_4_ReloadingContent example. I want to include multiple audio (over 20 audios) as POI content product details.

I try to develop programming as follows:

 

In the index.html:

 

<! - Content of POI detail page, You may also add thumbnails etc. here if you like ->

                 <Div data-role = "content">

 

                    <! - Title ->

                    <H3 id = "poi-detail-title"> </ h3>

 

                     <Audio id = "poi-detail-audio" controls> </ audio>

 

                     <Audio id = "poi-detail-audio02" controls> </ audio>

 

                  </ Div>

 

In the file reloadingPois.js

 

World var = {

...

 

// Loop through POI-information and create an AR.GeoObject (= Marker) per POI

        for (var currentPlaceNr = 0; currentPlaceNr <poiData.length; currentPlaceNr ++) {

 

            singlePoi var = {

                "Id": poiData .id,

                "Latitude": parseFloat (poiData .latitude)

                "Longitude": parseFloat (poiData .longitude)

                "Altitude": parseFloat (poiData .altitude)

                "Description": poiData .description,

                "Title": poiData .name,

                "ImgDrawable" poiData .imgDrawable,

 

                "Audio": poiData .audio,

                "Audio02" poiData .audio02,

 

            };

 

            World.markerList.push (new Marker (singlePoi));

        }

...

When fired // user pressed maker in cam

    onMarkerSelected: function onMarkerSelectedFn (marker) {

        World.currentMarker = marker;

 

        // Update panel values

 

        $ ("# Poi-detail-audio") html ("<source type =" audio / mpeg 'src =' "+ marker.poiData.audio +" '> </ source>. ");

 

        $ ("# Poi-detail-audio02") html ("<source type =" audio / mpeg 'src =' "+ marker.poiData.audio02 +" '> </ source>. ");

 

     ...

 

In the myjsonData.js file:

 

var myJsonData =

 

and to test the app visualize audio players 01 and 02, but the file audio02 throws the message "can not play audio file"

 

which do you think is the problem?

best regards

Playing audio in html is no core functionality of the Wikitude SDK.
Note that the AR view contatins a default system webview, you can therefore implement audio-controls etc. the default way.
Please have a closer look at html5'a audio tag features and restrictions and check out e.g. stackoverflow for specific audio tag questions.

Best regards

hi Andreas,

excuse my English. I did not express my problem. What I need is to play different audios. For example:

<audio id = "poi-detail-battery" controls> </ audio>

<audio id = "poi-detail-piano" controls> </ audio>

 

These resources I want to play different audio and simultaneously locate and page content in the details pane POI information. To simulate an audio mixer (sampler)

the problem I have is that no load a second, third, or fourth audio.

thanks for your time

best regards

Sorry but I think that I still don't get the issue.
Let me summarize the recommended approaches:

1) Check out stackoverflow for general audio related issues / questions (linked in previous post)
2) Although HTML5 Audio is the preferred choice you can also use SDK internal AR.Sound to control your audio files.

Best regards

Hi. My problem is:

I want to play many audio simultaneously in the details pane POI. But it fails. Gives the following error: "Can not play audio file"

 

Here the code to be working. So you tell you what my error:

 


In the index.html:

 

<! - Content of POI detail page, You may also add thumbnails etc. here if you like ->

                 <Div data-role = "content">

 

                    <! - Title ->

                    <H3 id = "poi-detail-title"> </ h3>

 

                     <Audio id = "poi-detail-audio" controls> </ audio>

 

                     <Audio id = "poi-detail-audio02" controls> </ audio>

 

                  </ Div>

 

In the file reloadingPois.js

 

World var = {

...

 

// Loop through POI-information and create an AR.GeoObject (= Marker) per POI

        for (var currentPlaceNr = 0; currentPlaceNr <poiData.length; currentPlaceNr ++) {

 

            singlePoi var = {

                "Id": poiData .id,

                "Latitude": parseFloat (poiData .latitude)

                "Longitude": parseFloat (poiData .longitude)

                "Altitude": parseFloat (poiData .altitude)

                "Description": poiData .description,

                "Title": poiData .name,

                "ImgDrawable" poiData .imgDrawable,

 

                "Audio": poiData .audio,

                "Audio02" poiData .audio02,

 

            };

 

            World.markerList.push (new Marker (singlePoi));

        }

...

When fired // user pressed maker in cam

    onMarkerSelected: function onMarkerSelectedFn (marker) {

        World.currentMarker = marker;

 

        // Update panel values

 

        $ ("# Poi-detail-audio") html ("<source type =" audio / mpeg 'src =' "+ marker.poiData.audio +" '> </ source>. ");

 

        $ ("# Poi-detail-audio02") html ("<source type =" audio / mpeg 'src =' "+ marker.poiData.audio02 +" '> </ source>. ");

 

     ...

 

In the myjsonData.js file:

 

var myJsonData =

 

 

 

attached a picture with error

best regards

Hi Romina,

Sorry to repeat myself but your issue is very much HTLM5 Sound tag related but this forum is for Wikitude SDK specific questions. Please check out stackoverflow for these kind of questions.

Best regards
Login or Signup to post a comment