The player accepts multi-channel audio files as an input. To create such file we recommend using our Multi-channel Audio Encoder. We provide builds for Windows, MacOS and Linux. You can read more about the encoder on the Github repository.
The main intended use of the player is with WordPress plugin – install the plugin and than you can setup all the options, activation and so on from the WordPress admin panel.
However if you decide to use the player as a standalone or with other CMS or database than keep reading to learn more about how to implement the player in HTML.
First of all download the TrickTheEar javascript file and place it in your website folder. Point to the script and stylesheet inside your header like so:
<html>
<header>
<script src="path_to_player/js/audio_min.js">
<script src="path_to_player/js/utility.js">
<script src="path_to_player/js/viz.js">
<link rel="stylesheet" href="path_to_player/css/tricktheear_style.css">
....
</header>
.....
</html>To display the player on the page you need to add a JavaScript snippet inside the body tag:
<!-- in this div the tricktheear player will appear -->
<div id="local_demo_player"></id>
//init tricktheear player manually
var player_instance = null;
var tricktheear_local_demo_player = {
"song": [{
"files": [{
"mime": "audio/aac",
"basename": "demo.aac",
"url": "https://demo.com/song.aac"
}],
"title":"demo song",
"numchans": "2"
}],
"dir": "https://tricktheear.eu/wp-content/plugins/tricktheear/",
"songdir": "https://tricktheear.eu/wp-content/plugins/tricktheear/uploads",
"id": "local_demo_player",
"lickey":"tricktheear_60afd2fbrfde82d",
"activationkey":"23edc558564d43ddf4ff2f1341c99d8c54a9e312f5e52b0c4dfc65c66a0f0864"
};
function inittricktheearplayer() {
player_instance = new TricktheearPlayer(tricktheear_local_demo_player);
}
document.addEventListener("tricktheear_script_loaded", inittricktheearplayer);As you can see we are creating new instance of the player when the script is loaded with:
new TricktheearPlayer(tricktheear_local_demo_player);Where ” tricktheear_local_demo_player ” is a JSON object with all your settings. Below you can have a look on the example where we define the player JSON data. Most important of all is parameter “id”. That is the id of the <div> where the player will appear. We provide urls to each song audio files. Please note that we are always providing two files for each song – .aac and .ogg. This is to ensure the compatibility with all web browsers. If you don’t need to support Mozilla Firefox you can add just .aac file. You can also provide other options inside song object such as number of audio channels it has, its name, author name, links to social media, background image, colors and so on. However you can also set these options player wide which is more convenient if they are the same for all the songs.
To create this JSON setup variable you can use our configurator or fill it in directly in JavaScript.
<!-- in this div the tricktheear player will appear -->
<div id="595821"></id>
<script>
var tricktheear_player_data_595821 = {
"song": [{
"files": [{
"mime": "audio/aac",
"basename": "01the_easiest_1.aac",
"url": "https://tricktheear.eu/wp-content/uploads/2021/04/01the_easiest_1.aac"
}, {
"mime": "audio/ogg",
"basename": "01the_easiest_1.ogg",
"url": "https://tricktheear.eu/wp-content/uploads/2021/04/01the_easiest_1.ogg"
}],
"numchans": "",
"author": "",
"link": "",
"donate": "",
"soundcloud": "",
"facebook": "",
"spotify": "",
"bandcamp": "",
"instagram": "",
"title": "01 The Easiest",
"id": ""
}, {
"files": [{
"mime": "audio/ogg",
"basename": "02Florence_and_-the_Tape_Machine_1.ogg",
"url": "https://tricktheear.eu/wp-content/uploads/2021/04/02Florence_and_-the_Tape_Machine_1.ogg"
}, {
"mime": "audio/aac",
"basename": "02Florence_and_-the_Tape_Machine_1.aac",
"url": "https://tricktheear.eu/wp-content/uploads/2021/04/02Florence_and_-the_Tape_Machine_1.aac"
}]
}],
"dir": "https://tricktheear.eu/wp-content/plugins/tricktheear/",
"songdir": "https://tricktheear.eu/wp-content/plugins/tricktheear//uploads",
"id": "595821",
"files": [],
"listenericon": {
"mime": "image/png",
"basename": "headphones_real_4.png",
"url": "https://tricktheear.eu/wp-content/uploads/2021/05/headphones_real_4.png"
},
"bcgimage": {
"mime": "image/jpeg",
"basename": "16ku9_1920x1080_AIDKID.jpg",
"url": "https://tricktheear.eu/wp-content/uploads/2021/04/16ku9_1920x1080_AIDKID.jpg"
},
"bcgcolor": "#000000",
"mainbarcolor": "",
"iconscolor": "",
"numchans": "6",
"author": "Aid Kid",
"link": "",
"donate": "",
"soundcloud": "https://soundcloud.com/aid-kid/",
"facebook": "https://www.facebook.com/aidkid/",
"spotify": "https://open.spotify.com/artist/2LceIbSCo8QRh9fjCp78lC?si=2ipYlIfcR4OM9W2b1Lv97Q&nd=1",
"bandcamp": "https://aidkid.bandcamp.com/",
"instagram": "https://www.instagram.com/aidkidcz/"
};
function inittricktheearplayer() {
new TricktheearPlayer(tricktheear_player_data_595821);
}
//player constructor dispatch event when loaded in DOM
document.addEventListener("tricktheear_script_loaded", inittricktheearplayer);
</script>Paths to files can be either absolute ( starting https:// ) or relative to the directory where the main JavaScript file is located ( ie ./music/myfile.ogg ). If you are still unsure how to proceed please contact us.
FAQ
- Can I have multiple players on one page?
- Yes, just make sure each has unique id
- How I can make multi channel audio files?
- Use our desktop encoder app. First prepare all your audio sources as separate wav files with same length. Than drag and drop them onto the encoder and press export.
- The player does not work. Help!
- First of all make sure that you understand the documentation. If all checks out please provide as many details as you can – preferably with snapshot from JavaScript console and contact us on email.