Playing audio mp3 file on site

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

Textpattern CMS support forum

#13 2014-01-19 02:49:55

Re: Playing audio mp3 file on site

#14 2014-01-20 12:05:12

Re: Playing audio mp3 file on site

GugUser wrote #278274:

gaekwad wrote #278252:

#15 2014-01-20 12:12:26

Re: Playing audio mp3 file on site

monicahu wrote #278323:

Board footer