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.

GugUser · 2014-01-19 02:49:55

With regard to my proposal with html5media, I’ll give you an example with reference to your January 5 page.

First you have to know the folder name of the uploaded files, default is (as in my example) “files”. If your installation is different, then you must replace in my example “files” by the other name.

Then replace in your code on lines 59-65 …

<script type="text/javascript" src="/plugins/audio-player.js"></script>  

<script type="text/javascript">  
    AudioPlayer.setup("http://stpeterseastlindfield.org.au/plugins/player.swf", {  
        width: 294  
    });  
</script>

… by the following:

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

From line 183 to 186 replace …

<div style="width: 292px; margin: 0 auto"><p id="audioplayer1"><audio id="audio1" controls preload="none" style="width:290px;"><source src="http://www.stpeterseastlindfield.org.au/file_download/356/20140105.mp3"></audio></p></div>  
        <script type="text/javascript">  
        AudioPlayer.embed("audioplayer1", {soundFile: "http://www.stpeterseastlindfield.org.au/file_download/356/20140105.mp3", animation: "no", titles: "05 Jan 2014 Revelation", rightbg: "AABA16", righticon: "FFFFFF", rightbghover: "BCCE18", righticonhover: "FFFFFF" });  
        </script>

… by the following:

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

Replace the {ID} with the code how you pass the audio file ID, for example with <txp:custom_field name="audio-file-ID" />.

The .htaccess file in the files folder must be disabled.

monicahu · 2014-01-20 12:05:12

GugUser wrote #278274:

With regard to my proposal with html5media, I’ll give you an example with reference to your January 5 page.
…
…
The .htaccess file in the files folder must be disabled.

Thank you GugUser, you’re really a great person for giving me such a detailed explanation of how things should be done. I totally agreed with your point on .htaccess. In fact, the reason that your initial proposal didn’t work for me should be caused by the file download restriction set in .htaccess. This was something I worked out a few days later. However, I will only disable it as a last resort because I plan to have members’ only restricted section for files download.

I shall try your proposal when I have more time and report my test results here. The real headache is actually IE which seems to be the most problematic browser.

gaekwad wrote #278252:

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.

Thank you Pete, you may see the “thinking bubbles” on my test page here. In fact, my other example of FlowPlayer on the test page works but I need to spend time converting the hyperlink to the actual audio controls. So, with a bit of effort FlowPlayer should work. Regarding jPlayer, I also have interest to try it after I finish testing all the current proposals. I’ll run to you for help if I encounter any problem then. Your site is interesting and I may spend some time browsing the content :)

This is my wish: If I have mastered the audio file rendition in my church site, then I’m able to help other small churches which are in need of someone to turn their websites more easily maintainable,

gaekwad · 2014-01-20 12:12:26

monicahu wrote #278323:

Thank you Pete, you may see the “thinking bubbles” on my test page here.

I do. I also see this in my browser inspector:

[Error] TypeError: 'undefined' is not an object (evaluating 'a.pick')
	(anonymous function) (flowplayer.min.js, line 6)
	dispatch (jquery.min.js, line 3)
	handle (jquery.min.js, line 3)
	trigger (jquery.min.js, line 3)
	(anonymous function) (jquery.min.js, line 4)
	each (jquery.min.js, line 3)
	each (jquery.min.js, line 3)
	trigger (jquery.min.js, line 4)
	(anonymous function) (flowplayer.min.js, line 6)
	each (jquery.min.js, line 3)
	each (jquery.min.js, line 3)
	flowplayer (flowplayer.min.js, line 6)
	(anonymous function) (flowplayer.min.js, line 6)
	c (jquery.min.js, line 3)
	fireWith (jquery.min.js, line 3)
	ready (jquery.min.js, line 3)
	H (jquery.min.js, line 3)

…which may be a factor in the file not loading properly.

Regarding jPlayer, I also have interest to try it after I finish testing all the current proposals. I’ll run to you for help if I encounter any problem then.

Let me know, happy to help. The audio players are all jPlayer and styled with Bootstrap 3, but I’ll be happy to share what I can.

Textpattern CMS support forum

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