Product:
This tutorial will show you how to load an audio list from a JSON web service in the plugin WonderPlugin Audio Player.
Step 1: Setup a JSON web service
In this tutorial, we will use PHP to create the JSON web service
In the web service, you need to create an array of mp3 files, then use json_encode to output the result to client side. A demo is as following:
<?php
// The play list can be dynamically created from database or whatever you like.
$playlist = array(
array(
"source" => array(
array(
"src" => "https://www.wonderplugin.com/wp-content/uploads/2014/03/In-the-Moment-of-Inspiration.mp3",
"type" => "audio/mpeg"
)
),
"title" => "In the Moment of Inspiration",
"artist" => "pinkzebra",
"album" => "",
"info" => "",
"duration" => "154",
"image" => "https://www.wonderplugin.com/wp-content/uploads/2014/03/Evening100.jpg"
),
array(
"source" => array(
array(
"src" => "https://www.wonderplugin.com/wp-content/uploads/2014/03/Peaceful-Dawn.mp3",
"type" => "audio/mpeg"
)
),
"title" => "Peaceful Dawn",
"artist" => "pinkzebra",
"album" => "",
"info" => "",
"duration" => "129",
"image" => "https://www.wonderplugin.com/wp-content/uploads/2014/03/Island100.jpg"
),
array(
"source" => array(
array(
"src" => "https://www.wonderplugin.com/wp-content/uploads/2014/03/Photos-and-Memories.mp3",
"type" => "audio/mpeg"
)
),
"title" => "Photos and Memories",
"artist" => "pinkzebra",
"album" => "",
"info" => "",
"duration" => "133",
"image" => "https://www.wonderplugin.com/wp-content/uploads/2014/03/Sunrise100.jpg"
)
);
echo json_encode($playlist);
?>
Please note, the free version supports maximum three songs in one player. So if you are using a free version, it will only load the first three audios.
The value of "duration" is the length of the audio file in milliseconds.
Step 2 - Connect WonderPlugin Audio Player to the web service
In the plugin, step 3, Options tab, add the following text to the Advanced Options box:
data-remote="https://www.wonderplugin.com/audio-jsonservice.php"
Please note, due to cross-domain issue, the domain of the web service must be the same as the player.
A demo is as following:
