CM Tooltip (CMTG) - Tooltips - Audio Integration
Adding Audio files to your Tooltip
The CM Tooltip eCommerce edition allows you to incorporate an HTML5 audio player in the glossary term page and also inside the tooltip. Supported file types are mp3, .m4a, .ogg, or .wav files.
The Tooltip AudioPlayer uses WordPress’sdefault player.
To add an audio file to any term, user needs to edit the term page and insert the URL of the audio file. It is also possible to upload the audio files using “Add media” button and copy & paste their permalinks to the audio area in the term editing page as show below:
Enabling The Tooltip AudioPlayer in the Plugin Settings
The audio player has two modes:
- The limited mode will only show “PLAY/ PAUSE” buttons.
- The full mode will also display a file name and other controls typical for the audio player
Audio player location can also be controlled in the plugin settings.
In the term page it can appear Above content, Below Content or not at all.
In the tooltip it has this options as well.
In the Glossary index page each term with audio attached, can have an audio icon next to the title. (see Audio in the Index Page below)
Here is how the audio player is embedded inside the term page
Styling the Audio Player
The audio player options are limited within the plugin, because it's part of the WordPress core and doesn't have any options.
But it can be customized to suit your site with the CSS. Here's a link to a great article covering the styling of the audio player in WordPress.
Audio in the Index Page
Once a term has an associated audio file assigned to it a tone icon will be shown next to it like in the screenshot below.
It is possible to remove this sign which uses the following css.
Audio from Dropbox
In order to use the audio files stored on the Dropbox please follow this guide:
1) Go to the Dropbox generated page for the file
2) Right click the Audio Player in the middle of the screen and choose "Inspec Element"
3) Find the location of the <audio> HTML tag in the page source eg. ( https://www.screencast.com/t/4AECjb9euCP)
4) Copy the value of the src attribute
5) Add the: &.mp3 at the end of the url
6) Paste the link in the Audio Url metabox