Playing audio mp3 file on site

monicahu · 2014-01-11 12:28:18

I use the plugin jnm_audio to play audio files on the website. The audio files are uploaded to the file area of the site. Each audio file is linked to an article via a custom field named as ‘url’. On the article form I have this line.

<p class="strong">Sermon in mp3 format :</p>

<p><txp:file_download form="mp3_download" id='<txp:custom_field name="url" />' /> 

and choosing <em>Save Target As</em> (in Internet Explorer) or <em>Save Link As</em> (in Firefox)<br />

OR Listen now (there may be a 30-second waiting time) <txp:jnm_audio fileid="."><txp:custom_field name="url" /></txp:jnm_audio></p>

New version of IE doesn’t show the control bar and that the site visitor would not be able to listen the audio without manually download the file.

An example of the article can be viewed on http://www.stpeterseastlindfield.org.au/sermons/1432/05-jan-2014-revelation

(1) How can I resolve the issue in IE browser?

(2) Is there a better way to launch the audio player? With HTML5 there are the audio controls but how do I set this up in TXP?

towndock · 2014-01-11 14:11:44

Check out Joel Dueck’s mod of jnm_audio. It provides an “html5 fallback” that makes jnm_audio work with mobile devices as well as desktop/laptop machines.

http://jdueck.net/article/a-better-audio-embed-for-textpattern

gaekwad · 2014-01-11 19:35:52

Outside of jnm_audio, there’s also jPlayer and FlowPlayer both HTML5 + Flash fallback.

philwareham · 2014-01-11 19:51:22

Flowplayer is very good, best one I’ve used (and I’ve tried loads).

Vienuolis · 2014-01-11 22:15:16

Is Flowplayer an audio player, too?

jstubbs · 2014-01-12 04:06:30

Flowplayer is indeed very good.

monicahu · 2014-01-12 07:50:33

towndock wrote #278043:

Check out Joel Dueck’s mod of jnm_audio. It provides an “html5 fallback” that makes jnm_audio work with mobile devices as well as desktop/laptop machines.

http://jdueck.net/article/a-better-audio-embed-for-textpattern

Thank you Keith. I followed your suggestion and was able to get it worked in Chrome, on iphone and android phones, but had an “Invalid source” error when clicked the Play control in IE11.

philwareham wrote #278058:

Flowplayer is very good, best one I’ve used (and I’ve tried loads).

What are the steps to implement Flowplayer method on my TXP site? Do I still use jmn_audio plugin as well?

gaekwad · 2014-01-14 13:06:10

monicahu wrote #278070:

What are the steps to implement Flowplayer method on my TXP site? Do I still use jmn_audio plugin as well?

You won’t need jmn_audio if you’re using Flowplayer. I daresay Phil may have more to add to this, but you should be up and running with the following. First, get the skeleton JavaScript and CSS code in place (docs here with walkthrough) and then have something like this in your body:

<div id="player" class="flowplayer fixed-controls" data-engine="audio" data-embed="false">
	<video>
		<source type="video/mp3" src="http://example.com/filename.mp3"></source>
		<source type="video/ogg" src="http://example.com/filename.ogg"></source>
	</video>
</div>

Note the .ogg fallback option. Most browsers will play .mp3 natively in HTML5 but not all, so the .ogg is good to have just in case.

GugUser · 2014-01-14 18:02:05

An other, very simple way is with html5media. For audio, you only need mp3 files.

In the head you have to add:

<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>

And in your HTML:

<txp:file_download_list id="{ID}" break="">
	<audio src="/files/<txp:file_download_name />" controls preload></audio>
</txp:file_download_list>

The ID is the file ID from the audio file. Nothing more.

monicahu · 2014-01-18 04:42:19

gaekwad wrote #278138:

You won’t need jmn_audio if you’re using Flowplayer. I daresay Phil may have more to add to this, but you should be up and running with the following. First, get the skeleton JavaScript and CSS code in place (docs here with walkthrough) and then have something like this in your body:

<div id="player" class="flowplayer fixed-controls" data-engine="audio" data-embed="false">...

Thank you Pete, tried your way of Flowplayer, I got “bubbles” going on Chrome, IE11 and a black square box on Safari. My mp3 is pure audio with no picture at all. Is this method appropriate?

GugUser wrote #278142:

An other, very simple way is with html5media. For audio, you only need mp3 files.

And in your HTML:

<txp:file_download_list id="{ID}" break="">...

The ID is the file ID from the audio file. Nothing more.

Thank you GugUser, tried your way of html5media, but your original code didn’t work. When I replaced it with the following it worked

<txp:file_download_list id="357" break="">
	<audio src="/file_download/357/<txp:file_download_name />" controls preload></audio>
</txp:file_download_list>

Not sure this is the proper way (I mean to include file id in file_download_list tag if I turn it into a proper statement with the file ID fed from la custom field (called URL) of the article instead of hard-coding it.

Edit: html5media method didn’t work in IE11. I had “Invalid Source” inside a black bar container. For testing purposes, I already hard-coded the file ID and filename.

Last edited by monicahu (2014-01-18 04:48:24)

gaekwad · 2014-01-18 10:35:50

monicahu wrote #278242:

I got “bubbles” going on Chrome, IE11 and a black square box on Safari. My mp3 is pure audio with no picture at all. Is this method appropriate?

Do you have a public URL you can share with the black box? I will admit to only having used FlowPlayer for video in the past, I’m migrating from jPlayer for audio. Try this – it’s MP3 audio on jPlayer – does it do what you want? If so, I’ll happily share the code.

GugUser · 2014-01-18 12:14:14

monicahu wrote #278242:

Thank you GugUser, tried your way of html5media, but your original code didn’t work. When I replaced it with the following it worked.

Of course you have to replace {ID} by the actual ID or the custom field tag. Or you can create a macro (smd_macro) for the full code.

Textpattern CMS

Textpattern CMS support forum

#1 2014-01-11 12:28:18