Adding Audio - ΩJr. Publizjr Creates Web PagesHow to customize a Publizjr Generator Template to play audio files. This article is aimed at PHP programmers.
The ability to play audio in a web page generated by Publizjr, requires giving the editors a customized Publizjr template. The Music Portfolio section on this very same OmegaJunior Consultancy serves as an example.
Publizjr Templates generate HTML5. As such, an audio template will employ the HTML5 Audio element, which allows for specifying multiple source media, as well as backwards compatibility.
Agreement must be reached with the authors about which audio formats to support, since each format requires additional programming. We suggest offering 3 formats: m4a, ogg, and wav.
We are going to assume that the author is going to showcase audio: that is the reason for visiting that page. Otherwise one wouldn't bother creating a separate template, and simply integrate audio capability into the default template.
The Audio-Capable Publizjr template will assume that the author placed the audio files in the page folder, and that the audio files bear the same name as the page id (a.k.a. folder name).
In the Basic Publizjr 1 Generator Template (found in the required parts download), line 57 is where the code determines existence. Somewhere between the helper functions and that line, add the following code:
If you need to support more audio formats, add more similar lines.
Then, if you require the presence of audio files to prevent a 404 message, adjust what was line 57 from this:
to this:
Again, if you need to support more audio formats, extend the above code accordingly.
Place it outside of a php code block. In the OmegaJunior Music Portfolio, we chose to show the Audio Element above the body text. You can choose to follow our example.
If you need to support more audio formats, adjust the above code.
Include an Embed Element for backwards compatibility with HTML5-lacking browsers. From what we have seen, this works.
If you agreed with the authors that they always provide the same audio formats, list the formats in the template, for the visitors to see. If not, let the authors list the audio formats their page offers, in their page's text.
We are going to assume that the author is going to showcase audio: that is the reason for visiting that page. Otherwise one wouldn't bother creating a separate template, and simply integrate audio capability into the default template.
The Audio-Capable Publizjr template will assume that the author placed the audio files in the page folder, and that the audio files bear the same name as the page id (a.k.a. folder name).
Do the Audio Files Exist?
In case of the OmegaJunior Music Portfolio, absence of all music files triggers a 404-Not-Found response. You can choose to do the same, or to show the page anyway, without the audio.In the Basic Publizjr 1 Generator Template (found in the required parts download), line 57 is where the code determines existence. Somewhere between the helper functions and that line, add the following code:
$strFilePathOgg = "./$strFileID/$strFileID.ogg";
if( !file_exists( $strFilePathOgg ) || !is_file( $strFilePathOgg ) ){
$strFilePathOgg = '';
}
$strFilePathM4A = "./$strFileID/$strFileID.m4a";
if( !file_exists( $strFilePathM4A ) || !is_file( $strFilePathM4A ) ){
$strFilePathM4A = '';
}If you need to support more audio formats, add more similar lines.
Then, if you require the presence of audio files to prevent a 404 message, adjust what was line 57 from this:
$bExists = ( strlen( $fileID ) > 0 && strlen( $fileName ) > 0 );to this:
$bExists = ( !empty( $strFileID ) && ( strlen( $strFilePathOgg ) + strlen( $strFilePathM4A ) > 0 ) );Again, if you need to support more audio formats, extend the above code accordingly.
Generating the Audio Element
Somewhere in the Publizjr audio template you should put a variation on this code:<audio controls="controls" autoplay="false" autobuffer="autobuffer">
<?php if( !empty( $strFilePathOgg ) ){ ?>
<source src="<?php print( $strFilePathOgg ); ?>" type="audio/ogg; codecs=vorbis"></source>
<?php }
if( !empty( $strFilePathM4A ) ){ ?>
<source src="<?php print( $strFilePathM4A ); ?>" type="audio/mpeg"></source>
<embed src="<?php print( $strFilePathM4A ); ?>" type="audio/mpeg" controls="controls" autostart="false" width="300" height="20"></embed>
<?php } ?>
</audio>Place it outside of a php code block. In the OmegaJunior Music Portfolio, we chose to show the Audio Element above the body text. You can choose to follow our example.
If you need to support more audio formats, adjust the above code.
Include an Embed Element for backwards compatibility with HTML5-lacking browsers. From what we have seen, this works.
Inform the Visitor
Very important feature (just read the Failure Notes to understand why): tell your visitor that this page requires plug-ins or built-in audio capabilities.If you agreed with the authors that they always provide the same audio formats, list the formats in the template, for the visitors to see. If not, let the authors list the audio formats their page offers, in their page's text.
Allow Alternative Downloads
As a best practice, the authors should add the audio files to the page's links text, offering them as a separate downloadable file. In each link text, name the audio format and download size, so visitors know which one to choose.Interested?
Let's meet for coffee or over lunch. Talk to me using this form.