Audio Pro - Embed Audio Playlist to External Site
Using Jamroom
Give me your log in. We just need to add the player in your include.php
Forum Activity for @nate
Audio Pro - Embed Audio Playlist to External Site
Using Jamroom
I finally have a player showing titles.
https://test.theflirtapp.com/audio_embed/profile_id=2
Step 1. Change the jrAudioPro_playlist_player.tpl to this code.
{jrCore_module_url module=$params.module assign="murl"}
<script type="text/javascript">
$(document).ready(function() {
var jp_volume = 0.8;
var volumeCookie = jrReadCookie('jrAudioPro2_audio_volume');
if(volumeCookie && volumeCookie.length > 0) {
jp_volume = volumeCookie;
}
var tw = $('#jp_container_{$uniqid}').width();
var th = Math.round(tw / 1.778);
$('#jp_container_{$uniqid} .jp-gui').height(th-30);
new jPlayerPlaylist( {
jPlayer: "#jquery_jplayer_{$uniqid}",
cssSelectorAncestor: "#jp_container_{$uniqid}"
} , [
{if isset($media) && is_array($media)}
{foreach $media as $item}
{
{$album_url = "`$jamroom_url`/`$item._item.profile_url`/`$item.module_url`/albums/`$item._item.audio_album_url`"}
{$field = 'audio_file'}
{$image = 'audio_image'}
title: "{$item._item.audio_title|truncate:55}",
artist: "{$item.artist|truncate:55}",
item_id: "{$item.item_id}",
poster: "{$item.poster}?crop=auto",
{if isset($item._item.video_title)}
{$album_url = "`$jamroom_url`/`$item._item.profile_url`/`$item.module_url`/albums/`$item._item.video_album_url`"}
{$field = 'field_file'}
{$image = 'video_image'}
title: "{$item._item.video_title|truncate:55}",
artist: "{$item.artist|truncate:55}",
item_id: "{$item.item_id}",
poster: "{$item.poster}?crop=auto",
{/if}
{foreach $item.formats as $format => $url}
{$format}: "{$url}",
{/foreach}
} ,
{/foreach}
{/if}
] , {
play : function() {
$("#jquery_jplayer_{$uniqid} .jp-gui").removeClass('start');
},
error: function(res) { jrCore_stream_url_error(res); },
playlistOptions: {
autoPlay: {$autoplay},
displayTime: 'fast'
},
swfPath: "{$jamroom_url}/modules/jrCore/contrib/jplayer",
supplied: "{$formats}",
solution: "{$solution}",
volume: jp_volume,
preload: 'none',
wmode: 'opaque',
size: { width: "100", height: "100px" },
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});
var holder = $('#jp_container_{$uniqid} .jp-controls-holder');
var gui = $('#jp_container_{$uniqid} .jp-gui');
var title = $('#jp_container_{$uniqid} .jp-title');
$('#jp_container_{$uniqid}').bind($.jPlayer.event.volumechange, function(event){
jp_volume = event.jPlayer.options.volume;
if($("#jp_container_{$uniqid}").hasClass('jp-state-muted')) {
jp_volume = 0
}
jrSetCookie('jrAudioPro2_audio_volume', jp_volume, 31);
});
})
</script>
<div class="jrAudioPro2_audio playlist" onclick="event.cancelBubble = true; if(event.stopPropagation) event.stopPropagation();">
<div id="jp_container_{$uniqid}" class="jp-audio">
<div class="jp-type-playlist">
<div class="video_container">
<div id="jquery_jplayer_{$uniqid}" class="jp-jplayer"></div>
<div class="jp-gui start">
<div class="jp-title">
<ul>
<li></li>
</ul>
</div>
<div class="jp-interface">
<div class="jp-controls-holder">
<ul class="jp-controls" id="play-pause">
<li><a class="jp-play" tabindex="{jrCore_next_tabindex}" title="{jrCore_lang module="jrVideo" id="1" default="play"}"></a></li>
<li><a class="jp-pause" tabindex="{jrCore_next_tabindex}" title="{jrCore_lang module="jrVideo" id="2" default="pause"}"></a></li>
</ul>
<div class="jp-progress-holder">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
<div class="jp-duration"></div>
<ul class="jp-controls" id="mute-unmute">
<li><a class="jp-mute" tabindex="{jrCore_next_tabindex}" title="{jrCore_lang module="jrVideo" id="4" default="mute"}"></a></li>
<li><a class="jp-unmute" tabindex="{jrCore_next_tabindex}" title="{jrCore_lang module="jrVideo" id="5" default="unmute"}"></a></li>
</ul>
<div class="jp-volume-bar" style="display: none;">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a class="jp-full-screen" tabindex="{jrCore_next_tabindex}" title="{jrCore_lang module="jrVideo" id="55" default="full screen"}"></a></li>
<li><a class="jp-restore-screen" tabindex="{jrCore_next_tabindex}" title="{jrCore_lang module="jrVideo" id="56" default="restore screen"}"></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="jp-playlist" style="display: none;">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
Step 2. create a template audio_embed.tpl
{jrCore_include template="header_embed.tpl"}
{jrCore_media_player
type="jrAudioPro2_playlist_player"
module="jrAudio"
field="audio_file"
search1="_profile_id = `$_post.profile_id`"
order_by="audio_file_track numerical_asc"
limit="50"
autoplay=false}
{jrCore_include template="footer_embed.tpl"}
Step 3. Create header_embed.tpl and footer_embed.tpl
header_embed.tpl
{jrCore_include template="meta.tpl"}
footer_embed.tpl
{if isset($css_footer_href)}
{foreach from=$css_footer_href item="_css"}
<link rel="stylesheet" href="{$_css.source}" media="{$_css.media|default:"screen"}"/>
{/foreach}
{/if}
{if isset($javascript_footer_href)}
{foreach from=$javascript_footer_href item="_js"}
<script type="{$_js.type|default:"text/javascript"}" src="{$_js.source}"></script>
{/foreach}
{/if}
{if isset($javascript_footer_function)}
<script type="text/javascript">
{$javascript_footer_function}
</script>
{/if}
</body>
</html>
updated by @nate: 01/27/20 01:52:44PM
Audio Pro - Embed Audio Playlist to External Site
Using Jamroom
I've been trying to get this to work and I can't believe I'm having this much trouble. I'll continue. I just didn't want you to think I quit on ya.
Audio Pro - Embed Audio Playlist to External Site
Using Jamroom
You know what, scratch the log in. I'm gonna work it out on my test site and post the code. That way others can see it and use it.
Audio Pro - Embed Audio Playlist to External Site
Using Jamroom
The problem I saw before was your players JS did not include track titles.
Audio Pro - Embed Audio Playlist to External Site
Using Jamroom
No, like this.
{jrCore_media_player
type="jrAudioPro_playlist_player"
module="jrAudio"
field="audio_file"
search1="_profile_id = 1"
order_by="audio_file_track numerical_asc"
limit="50"
autoplay=false}
Max-width for img tags
Jamroom Developers
max-width:100% is an illegal rule anyway. You have to use px. You should be able to just edit your CSS file. Use one of the comment classes or IDs and then write the rule for img. For example
.comment_page_section div img { max-width: 200px}updated by @nate: 01/22/20 07:04:53AM
