How to add embedded audio clips to your POI page

What are Embedded Audio Clips?

You're probably already familiar with how to insert 'Audio Ogg' clips into your POI pages. Those are the clips that play automatically upon arrival at a point of interest.

However, some POI pages benefit by having one or more additional audio clips embedded within the page that can be played manually by the user. These embedded audio clips can be used to provide additional information about a specific feature at a POI site, play music or sound effects, or give detailed instructions or directions.

Here's an example of an embedded audio clip:

How do I add an Embedded Audio Clip to my POI page?

By dragging and dropping the 'HTML Snippet' tool to the desired location on the POI page, a manually triggered audio player can be embedded into the page.


Steps:

1. First, upload the audio clips you wish to embed in the page to the GuideTags audio folder.

Your audio clips must be recorded and then uploaded in both .mp3 and .ogg versions.

Use the 'Audio OGG' tool to upload the clips, in the same way you would upload any other audio files.

(For this example, we have already uploaded two versions of an audio clip, called 'Inserted_Audio_Clip_Demo.mp3' and 'Inserted_Audio_Clip_Demo.ogg').

However, for embedded audio, you will not insert the clips into an 'Audio Ogg' player (doing so would cause the clip to trigger automatically on arrival).

Instead, you will manually insert the audio clip filename into an HTML Snippet tool on your POI page. To do this...

2. ....drag and drop the HTML Snippet tool to the location on the edit panel where you would like the embedded audio player to appear.


3. Next, Right-click here and choose 'Save link as...' to download the plain-text code snippet of the HTML code that you need. The plain-text HTML code will look like this:



4. Next, cut and paste the plain-text code from the file above into the HTML Snippet tool.

  • Edit the code in the HTML Snippet tool to replace 'XXXX' with the appropriate audio file name. (Do not duplicate the '.mp3' or '.ogg' file extensions; they are already present in the code snippet).

    SEE IMPORTANT NOTE BELOW... SOMETIMES GUIDETAGS CHANGES YOUR FILENAME WHEN IT IS UPLOADED. Make sure you use the correct name!


  • Repeat the edit to insert the filename in all locations where 'XXXX' appears. Pay careful attention to the file extensions!

IMPORTANT NOTE!

The GuideTags platform might automatically add several digits to the audio clip filename when it is uploaded. Use the 'Audio Ogg' tool to verify if this has happened.

In the example above, GuideTags has added the digits '_1638475651' to the filename for its own database management reasons. The filename on the server is therefore 'Inserted_Audio_Clip_Demo_1638475651.mp3'

If this has happened, be sure to ENTER THE NEW FILENAME WITH THE ADDITIONAL DIGITS when you are editing the code in the HTML Snippet tool, so that the filename exactly matches the one on the GuideTags server.

HTML Snippet tool:

6. Finally, after you have added the audio clip filename in all the correct places, save the page.



The audio player should then appear on your page like the one below. Click on the play button to try it!

Embedded manual audio player



This point of interest is one of many on the GuideTags app –
a free digital interpretive guide that features thematic tours, routes, and discovery sessions,
and automatically tells geolocated stories about the places that surround us.
Download the app today, and start exploring!
Contact us if you would like to create your own content.
Report an error or inappropriate content.