This question is answered. Helpful answers available: 1. Correct answers available: 1.


Permlink Replies: 19 - Pages: 2 [ 1 2 | Next ] - Last Post: 13-Apr-2019 10:45 Last Post By: MarkusD
MarkusD

Posts: 472
Registered: 13-Apr-2006
How to include sound files for individual files?
Posted: 05-Apr-2019 19:43
 
  Click to reply to this thread Reply
Hi,

I would to include some mp4 or wav files (both with sound) to some photos (JPGs or PNG files). I'm using JA 18.1.2 and Tiger Version 2.4.4.

I recorded the sound files and renamed the files according to the accompanied picture file:
2019-04-04_185233.png
2019-04-04_185233.m4a

JA excluded all m4a files automatically by default. The thing is, I don't want to have the m4a-files as objects "visible" in the final album, but would like to hear the sound when the picture is shown.

What do you recommend to achieve this?

Thanks, Markus

Edited by: MarkusD on 05-Apr-2019 19:48: Typo
jGromit

Posts: 7,478
Registered: 31-Jan-2006
Re: How to include sound files for individual files?
Posted: 05-Apr-2019 21:35   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
Dodgy, but do-able. The only way to do this, AFAIK, is to put <audio> tags in the comments of the images. You should convert the sound files to MP3's. Otherwise, you might have problems in some browsers. MP3 is the safe choice.

First, since we don't want the audio available on the thumbnail page, you will not be able to display image comments under the thumbnails, so delete this from the image thumbnail caption template:
<div class="comment">${commentShort}</div>
Now, at the top level of the album, create a folder called res. It will show "dimmed out," indicating that it's a "resource" folder, and not part of the album. Put all of your sound files in that folder.

Now, for the comment on 2019-whatever.png, enter:
<audio controls src="../res/2019-whatever.mp3"></audio>
You can also include comment text - you might have to put a line break between the text and the audio tag.

In the folders, it gets messy. Alas, you can't add a res folder at each level of the project - all the sound files will need to be at the top. So, on the first folder level, the audio tag will need to be:
<audio controls src="../../res/2019-something.mp3"></audio>
Note that the src path has to be relative to the slide image, no matter how deep it is.

And no, there's no semi-automatic way to handle this, because Tiger doesn't pump the image comments through the template engine, so you can't bury variables in them (my skins do). Otherwise, you could use the resPath and fileName variables to assemble the audio src automatically.
Laza

Posts: 2,218
Registered: 6-Sep-2005
Re: How to include sound files for individual files?
Posted: 06-Apr-2019 09:01   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I thought Tiger can handle jAlbum variables in comments. I will fix this, thanks for calling my attention!
Laza

Posts: 2,218
Registered: 6-Sep-2005
Re: How to include sound files for individual files?
Posted: 06-Apr-2019 09:57   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
I know by now what happened. Tiger (and Photoblogger) started to use jAlbum's own template processor because it's quicker. However this processor can't handle nested variables, so when the template contains a variable jAlbum doesn't care replacing the variables within that:
// Template
<div class="comment">${comment} <span>${resPath}</span></div>
// Comment
<img src="${resPath}/image.png">
// Result
<div class="comment"><img src="${resPath}/image.png"> <span>../res/</span></div>

Perhaps I will skip the native template processor if this cannot be resolved otherwise.
Laza

Posts: 2,218
Registered: 6-Sep-2005
Re: How to include sound files for individual files?
Posted: 06-Apr-2019 10:02   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Naturally you can add the variables straight through the template, which supposed to work:
<h5>${fileLabel}</h5>
<div class="comment">${comment}</div>
<audio controls src="${resPath}/${label}.mp3">

However this will generate the player for all pictures, not just those which you add the mp3 through the comment.
MarkusD

Posts: 472
Registered: 13-Apr-2006
Re: How to include sound files for individual files?
Posted: 06-Apr-2019 11:15   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Dodgy, but do-able. The only way to do this, AFAIK, is to put <audio> tags in the comments of the images. You should convert the sound files to MP3's. Otherwise, you might have problems in some browsers. MP3 is the safe choice.

First, since we don't want the audio available on the thumbnail page, you will not be able to display image comments under the thumbnails, so delete this from the image thumbnail caption template:

<div class="comment">${commentShort}</div>
Now, at the top level of the album, create a folder called res. It will show "dimmed out," indicating that it's a "resource" folder, and not part of the album. Put all of your sound files in that folder.

Now, for the comment on 2019-whatever.png, enter:

<audio controls src="../res/2019-whatever.mp3"></audio>
You can also include comment text - you might have to put a line break between the text and the audio tag.

In the folders, it gets messy. Alas, you can't add a res folder at each level of the project - all the sound files will need to be at the top. So, on the first folder level, the audio tag will need to be:

<audio controls src="../../res/2019-something.mp3"></audio>
Note that the src path has to be relative to the slide image, no matter how deep it is.

And no, there's no semi-automatic way to handle this, because Tiger doesn't pump the image comments through the template engine, so you can't bury variables in them (my skins do). Otherwise, you could use the resPath and fileName variables to assemble the audio src automatically.

Ahh, yes, the res folder is the key to solve this issue. I didn't understand what you wrote mentioning the comments of the image. Maybe I was not clear what my origin goal was.

To make things short, using the res folder solved my problem. I just use the following code in the comment section of a specific picture:
<audio autoplay>
  <source src="../res/2019-04-04_185233.m4a" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


Or, if you want to show the audio-player:
<audio controls autoplay>
  <source src="../res/2019-04-04_185323.m4a" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


Thanks again for your prompt and helpful answer. Markus
jGromit

Posts: 7,478
Registered: 31-Jan-2006
Re: How to include sound files for individual files?
Posted: 06-Apr-2019 12:26   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Laza wrote:
However this will generate the player for all pictures, not just those which you add the mp3 through the comment.

Yes, it's too bad the audio tag isn't "smart" - if there's no MP3, it still produces controls, but with a zero duration.
jGromit

Posts: 7,478
Registered: 31-Jan-2006
Re: How to include sound files for individual files?
Posted: 06-Apr-2019 12:35   in response to: MarkusD in response to: MarkusD
Helpful
  Click to reply to this thread Reply
MarkusD wrote:
I didn't understand what you wrote mentioning the comments of the image. Maybe I was not clear what my origin goal was.

Your goal is very clear. Which part of the answer did you not understand?

To make things short, using the res folder solved my problem. I just use the following code in the comment section of a specific picture:

Why are you making it more complicated?

Forget about autoplay. More and more browsers are blocking autoplay on audio and video, and autoplay just annoys the site visitor. Many users have addons that block autoplay already. And if you don't use the controls attribute, you will really annoy visitors. If autoplay does work, they'll get music that they can't stop, even if they want to. That's really aggressive, like the worst advertising on other sites. And if autoplay doesn't work, they will have no way of playing the sound.

There is no need for a type attribute. And there's no need for a "Your browser doesn't support..." fallback - all browsers support the audio tag.

And I really was serious about converting to MP3. It's universal. Using any other container is just going to cause problems.
MarkusD

Posts: 472
Registered: 13-Apr-2006
Re: How to include sound files for individual files?
Posted: 07-Apr-2019 15:43   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
MarkusD wrote:
I didn't understand what you wrote mentioning the comments of the image. Maybe I was not clear what my origin goal was.

Your goal is very clear. Which part of the answer did you not understand?

To make things short, using the res folder solved my problem. I just use the following code in the comment section of a specific picture:

Why are you making it more complicated?

Forget about autoplay. More and more browsers are blocking autoplay on audio and video, and autoplay just annoys the site visitor. Many users have addons that block autoplay already. And if you don't use the controls attribute, you will really annoy visitors. If autoplay does work, they'll get music that they can't stop, even if they want to. That's really aggressive, like the worst advertising on other sites. And if autoplay doesn't work, they will have no way of playing the sound.

I removed the autoplay. On the other hand, where is the difference between a video playing (when using the Auto start videos option in Tiger) immediately when you skip from a picture slide to a video slide? Isn't that also "aggressive"?

There is no need for a type attribute. And there's no need for a "Your browser doesn't support..." fallback - all browsers support the audio tag.
Thanks for the info. I grabbed that code from somewhere else, so it seems that code was outdated.

And I really was serious about converting to MP3. It's universal. Using any other container is just going to cause problems.
Good point.

Thanks again.

P.S: I summarized the info of this thread here.
jGromit

Posts: 7,478
Registered: 31-Jan-2006
Re: How to include sound files for individual files?
Posted: 07-Apr-2019 16:04   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
MarkusD wrote:
On the other hand, where is the difference between a video playing (when using the Auto start videos option in Tiger) immediately when you skip from a picture slide to a video slide? Isn't that also "aggressive"?

Yes, it is aggressive, and more and more browsers are blocking it. Mobiles generally won't autostart any video or audio, no matter what settings you use, and desktop browsers are starting to disable it. I'm considering removing that option from my skins, since it often has no effect.

I grabbed that code from somewhere else, so it seems that code was outdated.

Yes, there's a lot of "tech archaeology" out there, leftover code from an earlier time. Years ago, for example, to use audio on a web page, you had to provide different formats for different browsers - mp3, ogg, wav, etc. That's why the "type" attribute was needed. No need for any of that any longer (thank dog).
karlmistelberger

Posts: 530
Registered: 5-Dec-2013
Re: How to include sound files for individual files?
Posted: 08-Apr-2019 09:19   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
MarkusD wrote:
P.S: I summarized the info of this thread here.

I am puzzled by https://www.markus-drueck.de/jAlbum/Pictures/Skin%20Tiger/slides/P1080266.JPG

At low resolution I easily identified Refuge des Grands Mulets at the bottom and Refuge du Gouter at the right. On the other hand I failed to identify a building at the left even when using a high resolution display?
wolf-skate

Posts: 55
Registered: 1-Sep-2009
Re: How to include sound files for individual files?
Posted: 08-Apr-2019 12:35   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
Great
that is what I was asking for in feature request a good while back (called it 'add a sound clip' or something)

making it yet easier for non-scripting users, would be JA automating the audio attachment 'script' piece and placing of the sound file in res folder - direct menu action under each image (attach/link sound or something -> pop up : search sound file or/ dump sound file into/onto image)
Laza

Posts: 2,218
Registered: 6-Sep-2005
Re: How to include sound files for individual files?
Posted: 08-Apr-2019 14:44   in response to: wolf-skate in response to: wolf-skate
 
  Click to reply to this thread Reply
I will add this feature - not so hard to implement.
jGromit

Posts: 7,478
Registered: 31-Jan-2006
Re: How to include sound files for individual files?
Posted: 08-Apr-2019 14:51   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Laza wrote:
I will add this feature....

I almost certainly won't. This is one of those things that just encourages the worst instincts of some album creators. ;)
Laza

Posts: 2,218
Registered: 6-Sep-2005
Re: How to include sound files for individual files?
Posted: 08-Apr-2019 15:40   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
But who are we to judge ;-)
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums