Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2018-12-10 17:25:26

colin99
Member
Registered: 2005-11-15
Posts: 68

M4A audio player

I use JNM Audio player for MP3 – love it.

Is there anything kicking around that I can cobble together for M4A audio files?

Many thanks – all the best of the Season.


On the World Wide Web since Day 1 – Editor/Creator – Coffeecrew.comCoffee.bc.ca
Twitter – Twitter.Com/CoffeeCrew -

Offline

#2 2018-12-10 18:32:40

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,096
Website GitHub Mastodon Twitter

Re: M4A audio player

Hi Colin
We are in the process of replacing our video players with Raspberry Pis. Dead cheap, upgradable, open source, very reliable and easily replaceable. There are a lot of tutorials on the net on how to set it up. Our next step will be the audio. A flavour of VLC is actually made for the platform.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#3 2018-12-11 19:10:25

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,296
GitHub

Re: M4A audio player

  1. Buy a Raspberry Pi (preferably a 3B+)
  2. Install Volumio and configure
  3. Connect to an amp or some active speakers
  4. Done

Volumio is amazing, and highly recommended.

Offline

#4 2018-12-11 19:28:02

colin99
Member
Registered: 2005-11-15
Posts: 68

Re: M4A audio player

No – I was not clear —

An M4A player FOR the Textpattern website…

My JNM Audio plug in is awesome for TEXTPATTERN for MP3 files -

Wondering for M4A files…


On the World Wide Web since Day 1 – Editor/Creator – Coffeecrew.comCoffee.bc.ca
Twitter – Twitter.Com/CoffeeCrew -

Offline

#5 2018-12-11 20:58:15

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,296
GitHub

Re: M4A audio player

Couple of things: jnm_audio uses Flash, according to the overview – fewer and fewer browsers will support that going forward, so think about replacing it for mp3 files, too.

I’ve used jPlayer, FlowPlayer and other jQuery audio players with various success. They all need a bit of massaging into use with forms and such. I have a vague memory that I said I’d dig out how I used to do podcasting back in the distant past…might even have been you that I said that to, actually.

There’s also the HTML5 audio tag which is basic, but doesn’t require jQuery and can be styled if the mood takes you. More info: developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

Offline

#6 2018-12-11 21:35:53

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,752
Website

Re: M4A audio player

Browser support for the AAC flavour of m4a is now much better than it was (according to caniuse.com) so you should be able to use the html5 audio ad source tags (as gaekward said) and then style it nicely with something like plyr.io or another player wrapper plugin.


TXP Builders – finely-crafted code, design and txp

Offline

#7 2018-12-12 07:35:00

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,096
Website GitHub Mastodon Twitter

Re: M4A audio player

Hi Colin,
If you are using txp 4.7+, you could create a short code which you can call from the articles. You could create a form called audio and include something like:

<audio controls>
<txp:if_yield name="mp4">
<source src="/files/<txp:yield name="m4a" />.m4a" type="audio/m4a">
</txp:if_yield>
<txp:if_yield name="mp3">
<source src="/files/<txp:yield name="mp3" />.mp3" type="audio/mpeg">
</txp:if_yield>
Your browser does not support the audio element.
</audio> 

You can style the above to your liking and you can be calling it by using:

<txp::audio mp4="name_here" mp3="name_here" />

or, if you know that the two files will have the same name, or if in some cases you’ll be using one of the two formats, you can amend the code above to

<audio controls>
<txp:variable name="audio_file"><txp:yield name="title" /></txp:variable>
<txp:if_variable name="audio_file">
<txp:if_yield name="m4a" value="1">
<source src="/files/<txp:variable name="audio_file" />.m4a" type="audio/m4a">
</txp:if_yield>
<txp:if_yield name="mp3" value="1">
<source src="<txp:variable name="audio_file" />.mp3" type="audio/mpeg">
</txp:if_yield>
</txp:if_variable>
Your browser does not support the audio element.
</audio> 

and call this with

<txp::audio title="your_title" m4a="1" mp3="1" />

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#8 2018-12-12 09:23:52

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,475
Website GitHub

Re: M4A audio player

Inventive, colak, I like it!

You could perhaps (untested) shorten this further by using attributeless values instead of supplying ="1":

...
<txp:if_yield name="m4a">
  // Deal with m4a
</txp:if_yield>
<txp:if_yield name="mp3">
  // Deal with mp3
</txp:if_yield>

and call it with:

<txp::audio title="your_title" m4a mp3 />

The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#9 2018-12-12 22:39:14

colin99
Member
Registered: 2005-11-15
Posts: 68

Re: M4A audio player

Altered to

<audio controls>
<txp:variable name="audio_file"><txp:yield name="title" /></txp:variable>
<txp:if_variable name="audio_file">
<txp:if_yield name="m4a" value="1">
<source src="/files/<txp:variable name="audio_file" />.m4a" type="audio/m4a">
</txp:if_yield>
<txp:if_yield name="mp3" value="1">
<source src="/files/<txp:variable name="audio_file" />.mp3" type="audio/mpeg">
</txp:if_yield>
</txp:if_variable>
Your browser does not support the audio element.
</audio> 

Calling with – <txp::audio title=“your_title” m4a mp3 />

Where title is “song-title” less the MP3 or M4A extension

Player is popping up but not playing anything – digging a bit deeper.

<b>UPDATE – Started working when I actually gave an active TITLE to my MP3/M4A files!</B>

Whoops!

Good stuff!

Last edited by colin99 (2018-12-13 00:06:09)


On the World Wide Web since Day 1 – Editor/Creator – Coffeecrew.comCoffee.bc.ca
Twitter – Twitter.Com/CoffeeCrew -

Offline

#10 2018-12-13 07:05:01

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,096
Website GitHub Mastodon Twitter

Re: M4A audio player

Hi Colin maybe this is better if you are calling it with <txp::audio title="your_title" m4a mp3 /> as Stef suggested,

<txp:variable name="audio_file"><txp:yield name="title" /></txp:variable>
<txp:if_variable name="audio_file">
<audio controls>
<txp:if_yield name="m4a">
<source src="/files/<txp:variable name="audio_file" />.m4a" type="audio/x-m4a">
</txp:if_yield>
<txp:if_yield name="mp3">
<source src="/files/<txp:variable name="audio_file" />.mp3" type="audio/mpeg">
</txp:if_yield>
Your browser does not support the audio element.
</audio> 
</txp:if_variable>

It has the added advantage that no player will be loaded if the title is empty. Also notice the correction to the mime type for m4a files.

Last edited by colak (2018-12-14 06:41:15)


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#11 2018-12-13 17:45:10

colin99
Member
Registered: 2005-11-15
Posts: 68

Re: M4A audio player

colak wrote #315561:

Hi Colin maybe this is better if you are calling it with <txp::audio title="your_title" m4a mp3 />

<txp:variable name="audio_file"><txp:yield name="title" /></txp:variable>...

It has the added advantage that no player will be loaded if the title is empty. Also notice the correction to the mime type for m4a files.

A minor thing but shouldn’t -
<source src=”<txp:variable name=“audio_file” />.mp3” type=“audio/mpeg”>
be
<source src=”/files/<txp:variable name=“audio_file” />.mp3” type=“audio/mpeg”>


On the World Wide Web since Day 1 – Editor/Creator – Coffeecrew.comCoffee.bc.ca
Twitter – Twitter.Com/CoffeeCrew -

Offline

#12 2018-12-14 06:40:46

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,096
Website GitHub Mastodon Twitter

Re: M4A audio player

indeed! I corrected it in the code for future reference.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB