[Solved] html and audio

BryanA. · 2018-07-31 22:16:07

A question that my searching turns up comes around every couple years, how to get textpattern to play nice with my hopeful podcast site. Ignoring all the other work I have to do (!) the flowplayer is out of the running at $25 a month now. The JPlayer stuff is fun but I’d rather first exhaust the HTML5 audio options.

<audio controls>
<source src=“http://xxx123.com/index.php?s=file_download&id=1” type=“audio/mpeg”>
Your browser does not support the audio element.
</audio>
works, and

<audio controls>
<source src=<txp:file_download_link id=“1” /> type=“audio/mpeg”> …
obviously fails, but the whole thing is very un-appealing with so little styling allowed in ‘audio’. I’m still getting my head around the RSS feed I’ll need and how to distribute for any chance at even terrible success (which would be great) but I want the website I OWN to be the center of my efforts so if there’s ever any revenue, it’s in an area I can control and offer additional material to listeners.

My question/s is/are What is the attractive, customizable way to play audio (I have no video goals) currently on Textpattern? and, I’ve done searches but may have missed the answer to: Is a vendor (Theme Forest, etc) providing an easy audio theme website solution without a half-million other ‘features’ getting in the way?

Frankly, I would LOVE to stay as basic as can be; HTML with minimal fuss about js and swf unless you tell me that JPlayer is the way to go for now.

Last edited by BryanA. (2018-08-06 14:49:00)

jakob · 2018-07-31 22:37:46

I’ve no experience of hosting podcasts so these may or may not fit the mark.

There’s oui_player and its associated oui_audio extension for easy embedding of HTML5 audio.
I’ve used cashmusic’s soundplayer (docs) in the past as a javascript-based means of creating simple customisable players and playlists from a simple list of links to audio files. It’s free, completely stylable and comes with good intentions, good vibes (and cool music) ;-) In txp you need only construct linklists to audio files… it takes care of the rest.

And there are probably more besides…

BryanA. · 2018-07-31 23:49:41

I appreciate that response! I hadn’t stumbled into oui_audio which looks dangerously close to what I’m after. I also took careful note of your signature! ;) I’ve got to be a single dad first leaving too little time for too much of tinkering.

jakob · 2018-08-01 09:17:38

Some other notes that may be of interest:

Joel and Jessica Dueck sussed this all out a few years back for their Howell Creek Radio site, which is described here. Maybe they can give you some pointers or provide assistance closer to home.
There is a truly ancient tutorial on podcasting with Textpattern here. While you’ll need to consult the current podcast feed specs (see the “more resources” part for code examples and docs) and no longer want flash-based players, the basic principle of the tutorial stands. Instead of the plugin ‘mg_header’, you can use Textpattern’s own txp:header tag (new in v4.7) and construct a custom feed in a section of your choosing, or you can use rah_external_output with which you can create custom feeds with the correct content-type.

gaekwad · 2018-08-01 13:07:40

I used to run a podcast site with Textpattern, I’ll check my database archives and refresh my memory of how I did it. It handled the iTunes RSS input, had an open source player and did a few fancy things. Give me an hour and I’ll get back to you.

Edit: dropping things in here so you can have a look around, I’ll update as I find more stuff.

First podcast I did (long since dead) used jPlayer — worked fine, not the simplest of things to get working.

Last edited by gaekwad (2018-08-01 13:15:37)

gaekwad · 2018-08-01 13:29:23

Here’s my route with jPlayer. Contains JavaScript and a single SWF as fallback. I know you don’t want to go down this avenue as Plan A, but bear with me.

I had this in the <head> to set up the JavaScript:

		<txp:if_individual_article>
			<txp:if_custom_field name="media-url" match="pattern" value="mp3">
				<script type="text/javascript">
				//<![CDATA[
				$(document).ready(function(){
					$("#jquery_jplayer_1").jPlayer({
						ready: function (event) {
							$(this).jPlayer("setMedia", {
								mp3:"<txp:custom_field name='media-url' />"
							});
						},
						swfPath: "/extras/jplayer/jplayer-2.4.0",
						supplied: "mp3",
						wmode: "window",
						smoothPlayBar: true
					});
				});
				//]]>
				</script>
			</txp:if_custom_field>
		</txp:if_individual_article>

This uses a custom field called media-url which I pattern-matched for mp3.

Load the CSS and JS:

		<link href="/css/jplayer.min.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.4.0/jquery.jplayer.min.js"></script>

…and then load the player bits in the <body>:

			<txp:if_custom_field name="media-url" match="pattern" value="mp3">
				<div class="row">
					<div class="col-md-6" id="player">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="col-md-12">
									<div id="jquery_jplayer_1" class="jp-jplayer">	
									</div><txp:hide><!-- jquery_jplayer_1 --></txp:hide>
									<div id="jp_container_1" class="jp-audio">
										<div class="jp-type-single">
											<div class="jp-gui jp-interface">
												<div class="jp-controls">
													<div class="row">
														<div class="col-xs-4 col-sm-4 col-md-4" style="text-align:right;">
															<button title="Play" href="javascript:;" class="jp-play btn btn-lg btn-success" tabindex="1"><span class="glyphicon glyphicon-play"></span></button>
															<button title="Pause" href="javascript:;" class="jp-pause btn btn-lg btn-warning" tabindex="1"><span class="glyphicon glyphicon-pause"></span></button>
														</div><txp:hide><!-- col-xs-4 col-sm-4 col-md-4 --></txp:hide>
														<div class="col-xs-4 col-sm-4 col-md-4" style="text-align:center;">
															<button title="Stop" href="javascript:;" class="jp-stop btn btn-lg btn-danger" tabindex="1"><span class="glyphicon glyphicon-stop"></span></button>
														</div><txp:hide><!-- col-xs-4 col-sm-4 col-md-4 --></txp:hide>
														<div class="col-xs-4 col-sm-4 col-md-4" style="text-align:left;">
															<a href="<txp:custom_field name='media-url' />"><button title="Download" class="btn btn-lg btn-info"><span class="glyphicon glyphicon-save"></span></button></a>
														</div><txp:hide><!-- col-xs-4 col-sm-4 col-md-4 --></txp:hide>
													</div><txp:hide><!-- row --></txp:hide>
												</div><txp:hide><!-- jp-controls --></txp:hide>
												<div class="jp-progress progress progress-striped" style="margin-top:20px;">
													<div class="jp-seek-bar progress progress-striped active">
														<div class="jp-play-bar bar" title="Progress">
														</div><txp:hide><!-- jp-play-bar bar --></txp:hide>
													</div><txp:hide><!-- jp-seek-bar progress progress-striped active --></txp:hide>
												</div><txp:hide><!-- jp-progress progress progress-striped --></txp:hide>
												<div class="jp-current-time">
												</div><txp:hide><!--  jp-current-time --></txp:hide>
												<div class="jp-duration">
												</div><txp:hide><!--  jp-duration --></txp:hide>
											</div><txp:hide><!-- jp-gui jp-interface --></txp:hide>
										</div><txp:hide><!-- jp-type-single --></txp:hide>
									</div><txp:hide><!-- jp_container_1 --></txp:hide>
								</div><txp:hide><!-- col-md-10 col-md-offset-1 --></txp:hide>
							</div><txp:hide><!-- panel-body --></txp:hide>
						</div><txp:hide><!-- panel panel-default --></txp:hide>
					</div><txp:hide><!-- col-md-6 --></txp:hide>
				</div><txp:hide><!-- row --></txp:hide>
			</txp:if_custom_field>

This uses a combination of Bootstrap 3.0.3 and jPlayer 2.4.0 so things may be a bit different these days.

BryanA. · 2018-08-01 15:21:42

jakob – the Howell Creek Radio came up in my research and I was sorry to see them discontinued but happy their site was still up.

gaekwad – I wondered if custom fields had some portion of the solution to some answers. That’s a heady Head but I understand it’s worth it sometimes – the Bootstrap version and question is looking at. They’ve down a great job maintaining think but I’m not always sure what to chop to avoid bloat.

Meanwhile, I’m dying on the oiu_audio plugin install. GitHub confuses me – the .txt alone did nothing for me. Textpattern didn’t have any obvious complaints, but I have no oiu controls anywhere under any tab. I don’t yet have a temp plugin directory path but I’d now like to try to, quote, FTP upload in the Standard Template Format

Thanks for your patience! Meanwhile I’m recording, editing, working images and picking a ‘repeater’ service to convert my RSS to iTunes and Spotify et cetera feeds just to see if any audience exists anywhere. I forgot what good sweat it is to set something up.

gaekwad · 2018-08-01 15:33:13

Back to your OP if you can get the HTML5 audio stuff functional, you can style it — to an extent, at least — with some specifics. Take a look here for some background info, but be prepared to hack around a bit.

BryanA. · 2018-08-01 19:34:41

Great tip; Hacking happily – bumped into MediaElement.js – Forum Search result from years back but wondered if there was any comfortable recommendation of it?

edit to add: MediaElement.js tutorial that’s old but worked in Chrome and Edge similarly.

Last edited by BryanA. (2018-08-01 21:32:34)

jakob · 2018-08-02 11:52:07

BryanA. wrote #313211:

Meanwhile, I’m dying on the oiu_audio plugin install. GitHub confuses me – the .txt alone did nothing for me. Textpattern didn’t have any obvious complaints, but I have no oiu controls anywhere under any tab.

Maybe you don’t have all the parts. Nicolas, the plugin author, recently divided up his plugin into several modules so you only need include the services you want. That means you need several bits:

The .txt or .zip.txt of oui_player from here
The .txt or .zip.txt of oui_provider from here
The .txt or .zip.txt of oui_audio from here

I’ve not tried the audio one, but have a similar setup using oui_vimeo instead of oui_audio. You should then see the settings under Admin › Preferences…

BryanA. · 2018-08-03 21:18:38

Very happy the correct things are in Preferences now between that advice and Load Order. I picked Custom 1 as the field for the Play Attribute, and couldn’t figure out quite what to put there to make file 1 play in the oui_audio tags! I put word out to the maker since it feels like baby steps!

Thanks for your Git Hub help!

jakob · 2018-08-03 22:29:29

Nicolas wrote a few days ago in another thread that he is away from the forum for a short while, so I’ll try and help.

According to the readme the custom field you define in Admin › Preferences › Embedded players can take any of the following:

comma separated list of File ID’s;
comma separated list of filenames using one of the following extension: .mp3, .ogg, .oga, .wav, aac or .flac;
comma separated list of URL’s using one of the following extensions: .mp3, .ogg, .oga, .wav, aac or .flac;
Name of a field containing any of the above value.

So, try the following:

Upload a file in one of the recognised audio formats via the Admin › Files tab and note the file ID number.
Write an article with the details about your podcast, e.g. title, summary, maybe some custom fields with length, etc. (as described in the other links above). In custom_field number 1 (if that’s what you chose in the preferences), put the file id number in the custom field and save the article.
In your article form – in the standard setup it is the form called default which you can find in Presentation › Forms › Article –, you’ll now need to add the tag <txp:oui_player /> where you want the player to appear.

If you have no luck with the File ID#, try putting the name of the file in your chosen custom field.

Textpattern CMS

Textpattern CMS support forum

#1 2018-07-31 22:16:07

[Solved] html and audio

#2 2018-07-31 22:37:46

Re: [Solved] html and audio

#3 2018-07-31 23:49:41

Re: [Solved] html and audio

#4 2018-08-01 09:17:38

Re: [Solved] html and audio

#5 2018-08-01 13:07:40

Re: [Solved] html and audio

#6 2018-08-01 13:29:23

Re: [Solved] html and audio

#7 2018-08-01 15:21:42

Re: [Solved] html and audio

#8 2018-08-01 15:33:13

Re: [Solved] html and audio

#9 2018-08-01 19:34:41

Re: [Solved] html and audio

#10 2018-08-02 11:52:07

Re: [Solved] html and audio

BryanA. wrote #313211:

#11 2018-08-03 21:18:38

Re: [Solved] html and audio

#12 2018-08-03 22:29:29

Re: [Solved] html and audio

Board footer