?Sound tracks for slideshows?

pjtraveler · 2017-10-21 16:11:25

Is there any straight forward way to add a soundtrack to a slideshow?

Thanks,
:=)

Matthew · 2017-10-21 16:35:26

https://www.w3schools.com/html/html5_audio.asp

https://521dimensions.com/open-source/amplitudejs

pjtraveler · 2017-10-21 22:19:37

Matt,
Thanks, I'll look at the references.

pjtraveler · 2017-10-30 14:03:55

Matt,
I have been playing around, beyond the limits of my ability (which is how I get better), but I'm having a hard time with jplayer to get it to work. The simple audio controls I did and it looked UGLY.
So, officially asking for an audio/video enhancement to play audio tracks during slideshows.

pjtraveler · 2017-10-30 23:18:19

Matt,
I have been playing around, beyond the limits of my ability (which is how I get better), but I'm having a hard time with jplayer to get it to work. The simple audio controls I did and it looked UGLY.
So, officially asking for an audio/video enhancement to play audio tracks during slideshows.

http://www.patricklynchphotography.com/ … eboarding/
is the failure

Daniel Leu · 2017-10-31 01:47:56

pjtraveler wrote:

Matt,
I have been playing around, beyond the limits of my ability (which is how I get better), but I'm having a hard time with jplayer to get it to work. The simple audio controls I did and it looked UGLY.
So, officially asking for an audio/video enhancement to play audio tracks during slideshows.

http://www.patricklynchphotography.com/ … eboarding/
is the failure

First, I don't like sites that play music.... to the extent that the site really has to be good that I stay there for longer....

But I'm curious to see why this doesn't work for you! Something strange is going on. Apart of some CSS issues, I get the message

Update Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.

When when I go to the jplayer site, it plays the music.

Are you using the latest version of the code?

Daniel Leu · 2017-10-31 02:02:26

Hmm... I just downloaded the jplayer files and they date back to 2014. That's almost dead on arrival for me as this code hasn't been updated in the last 3 years.

Did you look at the html <audio> tag? That's now standard with modern browsers. More at https://www.w3schools.com/tags/ref_av_dom.asp and here is an example with a Adobe Flash (ouch) fallback https://html5tutorial.info/html5-audio.php for old browsers.

pjtraveler · 2017-10-31 08:07:52

Yes, latest version, and I suspect that my coding of it is not correct, though other than paths not sure. I have both mp3 and ogg formats, both of which are played natively by the browser, so I think it is something else, and it falls into that error.

function ttg_header_bottom( $style, $path ) {
echo '
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <link type="text/css" href="/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
   <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"> </script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"> </script>
   <script type="text/javascript">
   $(document).ready(function(){
   $("#jquery_jplayer_1").jPlayer({
   ready: function () {
   $(this).jPlayer("setMedia", {
   title: "Take 5",
   mp3: "http://www.patricklynchphotography.com/ … 484986.mp3",

   });
   },
   cssSelectorAncestor: "#jp_container_1",
   swfPath: "/js",
   supplied: "m4a, oga",
   useStateClassSkin: true,
   autoBlur: false,
   smoothPlayBar: true,
   keyEnabled: true,
   remainingDuration: true,
   toggleDuration: true
   });
   });
</script>
';
return true;
} // END
/*==============================*/

function ttg_footer_bottom( $style, $path ) {
echo
'<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
</div>
</div>
</div>
<div class="jp-details">
<div class="jp-title" aria-label="title"> </div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
';
return true;
} // END

Daniel Leu · 2017-10-31 08:17:36

I tried to access your mp3 file but without success. Is the path /backlight/custom/data/ts484986.mp3 correct?

Anyway, I do not advice to use a Flash based solution since this will not play on iPads etc...

rod barbee · 2017-10-31 08:21:10

script probably shouldn't go in the header. There's a ttg_scripts hook that may be better for this.
and you probably shouldn't be calling jQuery with this line:

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

since it's included in Backlight and is already being called.

And are you hosting this css file on your server:

 <link type="text/css" href="/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />

I just get a 404 page not found error when I look for it.

these two lines assume that you have those files inside a folder named "js" in the root of your site:

 <script type="text/javascript" src="/js/jquery.min.js"></script>         
          <script type="text/javascript" src="/js/jquery.jplayer.min.js"> </script>

and this line also looks like it's calling jQuery:

 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"> </script>

which you shouldn't need to do because Matt's already included it.

Matthew · 2017-10-31 15:46:31

Maybe you've changed the page since you posted a link, but when I look at it, I see the HTML portion of the player, but I do NOT see any of the coinciding scripts in the page source. So the player error displayed on the page isn't actually an error; it's fallback HTML that would otherwise be hidden if there were a script loading the player.

Or maybe you've removed that stuff in the meantime. The error might have been displayed because you were double loading jQuery, or could have been there for anything reason that might have resulted in broken scripts.

Regardless, ...

* You shouldn't be loading scripts in the head or header. Use ttg_scripts.

* Don't load jQuery; we're already loading our own version.

I linked you to the HTML5 audio element in my original reply, and recommend that over using jPlayer. Likely the reason jPlayer is languishing is because HTML5 has rendered it irrelevant. I would start there. And if that's not doing it for you, then look for solutions to progressively enhance what's working, rather than looking backwards to outdated players. The thing that's good about HTML5 is that it's natively supported by browsers, so you're not hanging the entire thing on third-parties, media plugins, etc. It casts a wide net for compatibility, while also being performant.

pjtraveler · 2017-10-31 20:32:41

Matt,
Thanks for the guidance.
I got the audio tag working without any problems when you gave that to me. The issue was, it was UGLY, and from my understanding could not be styled. THis is why I have moved on to try jplayer that you also pointed me towards, not that the current styling inn't ugly also.

Thanks,
:-)

rod barbee · 2017-10-31 21:08:08

Patrick,
If you post a link to one of those albums we can probably help with styling

Matthew · 2017-10-31 22:52:29

I recommended AmplitudeJS above for a more robust solution. I haven't looked at jPlayer in years, and would not recommend it at this point in time.

As I've said, there are ways to progressively enhance the audio element. Here is one such tutorial:
https://webdesign.tutsplus.com/tutorial … esign-7081

Here's another:
https://designshack.net/articles/css/cu … lement-ui/

I'm sure there are many others to be found. The HTML5 audio element is absolutely the best starting point, though.

Community @ The Turning Gate

#1 2017-10-21 16:11:25

?Sound tracks for slideshows?

#2 2017-10-21 16:35:26

Re: ?Sound tracks for slideshows?

#3 2017-10-21 22:19:37

Re: ?Sound tracks for slideshows?

#4 2017-10-30 14:03:55

Re: ?Sound tracks for slideshows?

#5 2017-10-30 23:18:19

Re: ?Sound tracks for slideshows?

#6 2017-10-31 01:47:56

Re: ?Sound tracks for slideshows?

#7 2017-10-31 02:02:26

Re: ?Sound tracks for slideshows?

#8 2017-10-31 08:07:52

Re: ?Sound tracks for slideshows?

#9 2017-10-31 08:17:36

Re: ?Sound tracks for slideshows?

#10 2017-10-31 08:21:10

Re: ?Sound tracks for slideshows?

#11 2017-10-31 15:46:31

Re: ?Sound tracks for slideshows?

#12 2017-10-31 20:32:41

Re: ?Sound tracks for slideshows?

#13 2017-10-31 21:08:08

Re: ?Sound tracks for slideshows?

#14 2017-10-31 22:52:29

Re: ?Sound tracks for slideshows?

Board footer