WordPress Glossary Plugin (CMTG) - Tooltips - Audio Integration
Adding Audio files to your Tooltip
The eCommerce edition of the WordPress Glossary plugin 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’s default player.
To add an audio file to any term, you need 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. Navigate to Admin Dashboard → CM Tooltip Glossary Ecommerce → Settings → Ecommerce Settings tab.
Head to the Audio player settings section. The options are:
- Display audio's icon in the index page - Select this option if you want to display an icon next to each term in the index page that has an audio attached to it.
- Minimize audio player? - Select this option if you want to leave only "Play/Pause" for audio players.
- Audio player location in the term page - Set the location of the audio player on the term page, above or below the content, or none at all.
- Audio player location in the tooltip - Set the location of the audio player on the tooltip above the content, below the content, none at all, or in the title. (If you chose Tooltip title, the audio player will be minimized).
Front-End Examples
Here is how the audio player is embedded inside the term page:
Here is the audio-player as embedded inside the toltip:
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.
label.cmtt-post-format-icon.cmtt-post-format-audio { display: none;}
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 "Inspect 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.
 |
More information about the WordPress Glossary Plugin Other WordPress products can be found at CreativeMinds WordPress Store |
 |
Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center |