Below, you’ll find a detailed guide on how to add the HTML5 jQuery Audio Player Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the HTML5 jQuery Audio Player Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the HTML5 jQuery Audio Player Plugin and the shortcodes it provides:
"HTML5 jQuery Audio Player is a robust plugin designed to provide high-quality, customizable audio streaming. It uses HTML5 and jQuery to give users a seamless and interactive audio experience."
- [hmp_player]
HTML5 jQuery Audio Player [hmp_player] Shortcode
The HTML5-jQuery-Audio-Player plugin shortcode enables users to create a customizable audio player. It can be modified to adjust autoplay, tracklist visibility, and design elements like color.
Shortcode: [hmp_player]
Examples and Usage
Basic example – Displays the HTML5 jQuery audio player on your page.
[hmp_player]PHP Function Code
In case you have difficulties debugging what causing issues with [hmp_player] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('hmp_player','wp_hmp_player');Shortcode PHP function:
function wp_hmp_player(){
if(get_option('showbuy')==1){
$bt = get_option('buy_text');
}else{
$bt = '';
}
$ap = get_option('autoplay');
if(!$ap){
$ap = 0;
}
$desc = get_option('hmp_description');
$sb = get_option('showbuy');
$nt = get_option('tracks');
if(empty($nt)){
$nt = 1;
}
$cr = get_option('currency');
$sl = get_option('showlist');
$cl = get_option('color');
$tc = get_option('tcolor');
if(empty($tc)){
$tc = '#cccccc';
}
if($sb==0){
?>
<style type="text/css">
.buy{ display:none !important;}
.rating{ right:10px !important;}
</style>
<?php
}
if(!empty($cl)){
?>
<style type="text/css">
.ttw-music-player{ background:<?php echo $cl; ?>; !important;}
</style>
<?php
}
if(!empty($tc)){
?>
<style type="text/css">
.ttw-music-player .tracklist, .ttw-music-player .buy, .ttw-music-player .description, .ttw-music-player
.player .title, .ttw-music-player .artist, .ttw-music-player .artist-outer {
color:<?php echo $tc; ?>; !important;
}
</style>
<?php
}
if($tc=='black'){
?>
<style type="text/css">
.ttw-music-player .player .title, .ttw-music-player .description, .ttw-music-player .tracklist li {
text-shadow:none !important;
}
</style>
<?php
}
if($sl==0){
?> <style type="text/css">
.tracklist{
display:none !important;
}
</style>
<?php
}
$pluginurl = plugin_dir_url( __FILE__ );
?>
<link href="<?php echo $pluginurl ; ?>includes/css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="<?php echo $pluginurl ; ?>includes/jquery-jplayer/jquery.jplayer.js"></script>
<?php require_once 'includes/ttw-music-player.php'; ?>
<script type="text/javascript">
var myPlaylist = [
<?php
global $wpdb;
$table = $wpdb->prefix.'hmp_playlist';
$lsql = "SELECT * FROM $table";
$songs = $wpdb->get_results( $lsql );
if(!empty($songs)):
foreach($songs as $song): ?>
{
mp3:'<?php echo $song->mp3; ?>',
oga:'<?php echo $song->ogg; ?>',
title:'<?php echo $song->title; ?>',
artist:'<?php echo $song->artist; ?>',
rating:'<?php echo $song->rating; ?>',
buy:'<?php echo $song->buy; ?>',
price:'<?php echo $song->price; ?>',
duration:'<?php echo $song->duration; ?>',
cover:'<?php echo $song->cover; ?>'
},
<?php
endforeach;
else:
?>
{
mp3:'<?php echo $pluginurl; ?>player/mix/1.mp3',
oga:'<?php echo $pluginurl; ?>player/mix/1.ogg',
title:'<?php __('Sample Track','html5-jquery-audio-player') ?>',
artist:'<?php __('Sample', 'html5-jquery-audio-player') ?>',
rating:4,
buy:'#',
price:'1.00',
duration:'4:50',
cover:'<?php echo $pluginurl; ?>player/mix/1.png'
}
<?php
endif;
?>
];
jQuery(document).ready(function(){
jQuery('#myplayer').ttwMusicPlayer(myPlaylist, {
currencySymbol:'<?php echo $cr; ?>',
description:"<?php echo $desc; ?>",
buyText:'<?php echo $bt; ?>',
tracksToShow:<?php echo $nt; ?>,
<?php if($ap==0): ?>
autoplay:false,
<?php else: ?>
autoplay:true,
<?php endif; ?>
});
});
</script>
<?php
$palyer_div = '<div id="myplayer"></div>';
return $palyer_div;
}
Code file location:
html5-jquery-audio-player/html5-jquery-audio-player/index.phpConclusion
Now that you’ve learned how to embed the HTML5 jQuery Audio Player Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply