In response to the Toongabbie Anglican Church site being linked from the ESV Bible Blog, I received several requests to explain how the Bible Talk pages loaded the ESV text using “AJAX”.
The following is a brief summary. I am no expert in this, and simply share what I have done.
I cannot provide support for the following, requests for support may be ignored. Sorry.
In this article:
Demo
Show: 1 John 1
Retrieving text
Using code from the ESV API page, the “bibletext.php” file takes the Bible reference passed to it and retrieves the ESV text.
<?php
$passage = urlencode($_GET['passage']);
$key = "IP";
$options = "audio-format=flash";
$url ="http://www.esvapi.org/v2/rest/passageQuery?key=$key&$options&passage=$passage";
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
curl_close($ch);
print $response;
?>
Note: I’ve left in “$options”, however, it is not required here because the default audio-format is flash.
Load Javascript
In the head of the HTML document, load the javascript.
<script type="text/javascript" src="http://www.example.com/directory/btajax.js"></script>
Javascript
I named the javascript btajax.js. I cannot quote a source for this code, but from a quick Google search it seems pretty standard.
var ajax=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
@end @*/
if (!ajax && typeof XMLHttpRequest!='undefined') { ajax = new
XMLHttpRequest(); }
function getMyHTML(serverPage, objID) {
if((serverPage.indexOf("http://www.example.com/")!=0)) return;
var obj = document.getElementById(objID);
obj.innerHTML = "<div style='background: #FFFFCC;'><h2>Bible
Passage</h2><p>Loading...</p></div>";
ajax.open("GET", serverPage);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
obj.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}
Place the Bible text
Put this in your HTML page where you want the text to appear.
<div id="bibletext"></div>
Make sure you grab the CSS provided on the ESV API page, and copy it to your CSS file (or better create a separate CSS file and link to it in addition to your normal CSS file). This CSS file provides some basic formatting to the ESV text, e.g. superscript for verse numbers.
Trigger the text to load
A link that triggers the text to appear. This link includes the address of the bibletext.php file created earlier. You would replace <?php print $passage;?> with the output of your CMS.
On this page, for the demo, I have set the variable $passage to 1 John 1.
The link also includes the id of the div we created earlier, “bibletext”.
<p>Bible Passage: <a href="javascript://" onclick="getMyHTML('http://www.example.com/directory/bibletext.php?passage=<?php print $passage;?>','bibletext');">John 3:16</a></p>
For users who have Javascript turned off, this link will do nothing. So, change the href in the above to point to an actual page that will show the text (e.g. the ESV page, or your own Bible search page). You also need to add “return false;” to the “onclick”. For example, this code takes the user to the ESV site directly if Javascript is turned off:
<p>Bible Passage: <a href="http://www.gnpcb.org/esv/search/?q=<?php print $passage;?>" onclick="getMyHTML('http://www.example.com/directory/bibletext.php?passage=<?php print $passage;?>','bibletext');return false;">John 3:16</a></p>
On the Toongabbie Anglican Church web-site, if Javascript is turned off, the link will take them to the Bible search result on our web-site for the reference.
Links
- More about the ESV Bible Web Service
- On the Toongabbie Anglican Church site, I use the Fade Anything Technique to highlight the text that appears in yellow, then fade to the normal background colour.
- Ajaxload is an online tool to make an animated loading icon.
History
I recently received an email asking how we recorded sermons at Toongabbie Anglican Church. This article provides the details of the setup we use.
As yet, we are not publishing audio files on our web-site, so I can’t link to the results of this setup – this will hopefully change when the site is re-designed.
At the source, we have a wooden lecturn. I mention the lecturn because it is at a good height, allowing the lecturn microphone to be left in place for any preacher, leader or speaker. The lecturn microphone we use is an EV(Electro-Voice) PolarChoice. The “choice” is the ability to switch between pick-up patterns. We use the standard directional setting. The microphone requires Phantom Power, which is provided through the mixer – if your mixer doesn’t provide phantom power, you can get a little black box that connects in-line to provide the power.
The signal travels through the multi-core to the Yamaha MX20/6 mixer. The MX20/6 is a simple, relatively inexpensive mixer, that provides a good set of features. Apart from sending the audio from the lecturn to the main stereo output, we also send it to Group 4. The Group 4 master level remains up all the time. The Group 4 output on the mixer is cabled to the input of the soundcard on a Windows PC that sits next to the mixer at the back of the church.
The Windows PC is a basic desktop machine, the only special feature being a dual-head video card to allow the use of Presenter view in PowerPoint. Presenter view allows the operator to have a control panel for the presentation being displayed. The second video output is sent (via a VGA extender) from the back of the church to the front to feed the video projector.
To record the audio, we use HarddiskOgg. This program is exceptional for this application for a number of reasons:
- Automatic file numbering – the operator does not need to worry about setting a filename.
- Normalization amplifies the input signal to a constant volume. This is handy for a lecturn situation where the preacher may move around.
- Command Line Mode. In our church there are a number of technicians and engineers (best generalised as nerds) – the guy who recommended this program quickly sold it’s virtues when he put together two little scripts to take advantage of the command line mode. We happened to have a Microsoft multimedia keyboard connected to this computer. This keyboard has a number of additional keys for Internet related activities. However, in our case two of the keys have been associated to the recording activity. The “Forward” key sets the program to record, using parameters set through the command line. To start recording the operator simply presses the Forward key. The program begins recording and automatically minimises to the system tray – this is particularly nice because it does not take away focus from the PowerPoint presentation running at the same time. This is important because the operator is not necessarily controlling the PowerPoint presentation, often the preacher or leader will be controlling remotely. For the remote to operate, the PowerPoint presentation must retain focus. The “Stop” key is obviously set to stop the recording.
We have three meetings on a Sunday, two are usually recorded. With this setup, one person has a small task on Sunday night of copying the two audio files for that day from the directory where the recording program dumps them to a directory for the relevant meeting. At the same time he renames the files to make them a little more readable (e.g. including the sermon title and preacher’s initials).
So there you have it, source to end product. Members wanting a recording of a sermon can simply ask one of the sound/PowerPoint operators, who can make a copy to CD-ROM on the same machine.
This machine has access to the internet through a broadband connection shared between the minister’s residences and the church building. In the future, the operator will simply upload the file to our web-site, and check a box on the web-site admin pages to indicate that an audio version is available (in addition to the normal text versions). What format we use for the web-site will still need to be considered. Will we stream the audio, make it downloadable or both?
Being able to take an audio or video file and broadcast it to users of your web-site is not a difficult process, however there are several steps involved which I’ve summarised here. This tutorial focuses on audio files, however, to work with video files, follow the same concepts.
- Encode the source file into a format suitable for streaming
- Create a metafile, which will ensure users experience the streaming media correctly.
- Link from your web-page to the metafile.
Article Index
Encode the source
Encode – Windows Media
Taking an audio file (of the ‘wav’ format) and converting it to Windows Media format is a straight forward process. Download Windows Media Encoder or Previous Version, install it, and the program will guide you through the process.
Encode – Real Format
Similarly, to convert to the real audio format you require RealSystem Producer. There is a free version available: RealProducer 10 Basic.
Streaming your media
With your original media file encoded into Windows Media or Real format, you need to now give visitors to your web-site access to this file. That is, you want your users to be able to click a link (either a text or graphic link) and have the chosen media “stream” to the assigned media player.
Linking to a file located on your web server is a simple matter. In the same way you link to a html file, you can link to a document, picture or media file (each will then open in the respective application on your computer, or if you don’t have the chosen application, you may be prompted to save the file, or find the relevant application on the Internet).
However, when trying to stream media from your web-site, there is an additional intermediate step required. That is, the creation of a ‘metafile’.
About the metafile
A metafile is a short text file (therefore, easily created in Notepad, Simpletext, or any text editor), much like an html file. However, instead of being rendered by a browser, the metafile is utilised by the media player to identify the location of the media file to be streamed. In addition, further ‘tags’ (similar, but not the same to those of html) can be used within the metafile to instruct the media player to present your media in a certain way.
For example, the metafile could add the following features to the presentation of the media within the media player:
- A logo graphic, with link back to an html document on your web-site that provides more information about the chosen content.
- Create a play-list, where the user can, within the media player, choose which track they want to listen to, out of a selection – much like the track on a CD.
Use of the metafile
On your web-page, rather than directly linking to the media file, you link to the metafile. When a visitor to your site clicks the link to the metafile, the metafile is downloaded to the user’s machine. The contents of the metafile are then sent to the respective media player, and ‘executed’. The media player using the information in the metafile, connects to the internet, locates the media file and begins to play it. Furthermore, the metafile will render any other instructions provided in the metafile, like: “display logo file and add hyperlink to homepage”. Of course, that is not how the contents of a metafile is written.
Creating a metafile
As was said earlier, a metafile is a text file, easily created in a basic text editor, you probably already have one available on your PC (Windows – Notepad, Macintosh – Simpletext).
Metafiles for use by Windows Media and Real Media are not the same, so, I will give an example of each below.
Example: Streaming a sermon
The following example will create the metafile, and associated HTML to create a link that will stream a single media file. The example is based on the practical application of providing a stream of a sermon.
Included is a banner or graphic, with a link to a chosen web-page. My example links back to this tutorial, however, in a real application, the link would be to the main church home page, or the text version of the sermon in question. The reason such a link is useful, is that the user may access the media file one day and bookmark it in their media player. On another day, the user accesses the media file, from the bookmark in their player. The graphic would indicate that if they click the graphic, they will be taken to a text version of the sermon. Thereby providing an integrated approach to utilising streaming media.
Windows Media Metafile
Filename: stream.asx
<ASX version = "3.0">
<TITLE>Streaming Media Sample</TITLE>
<ABSTRACT>Streaming media sample by Simon Job.</ABSTRACT>
<AUTHOR>Toongabbie Anglican Church</AUTHOR>
<COPYRIGHT>Toongabbie Anglican Church</COPYRIGHT>
<MOREINFO HREF="http://simon.job.id.au/articles/3/streaming-media-tutorial" />
<BANNER HREF = "http://simon.job.id.au/files/streaming/logo_wm.gif">
<ABSTRACT>Streaming media sample</ABSTRACT>
<MOREINFO HREF = "http://simon.job.id.au/articles/3/streaming-media-tutorial" />
</BANNER>
<Entry>
<Ref href = "http://simon.job.id.au/files/streaming/stream.wma" />
<TITLE>Freedom</TITLE>
</Entry>
</ASX>
Explanation of .asx metafile:
The <TITLE>, <ABSTRACT>, <AUTHOR>, <COPYRIGHT> and <MOREINFO> tags all provide information to the end-user through Windows Media Player.
The <BANNER> tag and the <ABSTRACT> and <MOREINFO> tag related to the <BANNER> tag, specify the appearance and behaviour of a ‘banner’ shown within the player window.
The <Entry> tag is specifying the audio file to stream.
Use of the .asx file:
In the HTML document, a simple link is made to the ’.asx’ file:
<a href="stream.asx">Windows Media Stream</a>
Real Media Metafile
Filename: stream.ram
http://simon.job.id.au/files/streaming/stream.smil?screensize="original"
The .ram file, like the .asx file, is linked from the HTML page:
<a href="stream.ram">Real Audio Stream</a>
For the Real Format, a second file is required. The .smil file is referenced from the .ram file, which is referenced from the HTML document!
The .smil is similar in composition to the .asx file.
Filename: stream.smil
<smil>
<head>
<meta name="Title" content="Streaming Media Sample"/>
<meta name="Author" content="Toongabbie Anglican Church"/>
<meta name="Copyright" content="Toongabbie Anglican Church"/>
<layout>
<region id="pic" top="0" left="0" width="150" height="150" background-color="white"/>
</layout>
</head>
<body>
<par>
<audio src="http://simon.job.id.au/files/streaming/stream.rm" title="Freedom"/>
<img src="http://simon.job.id.au/files/streaming/logo_rm.gif?
url=http://simon.job.id.au/articles/3/streaming-media-tutorial"
region="pic" title="picture" fill="freeze"/>
</par>
</body>
</smil>
Explanation of the .smil metafile:
Most of the tags are self explanatory / similar to those of the .asx file.
The <layout> tag is used to define a section within the player window that can later be used by a logo/graphic.
The <par> tag is similar to the <ENTRY> tag of the .asx file. Within the <par> tag the audio file to stream is identified. Also within the <par> tag, an image (<img> tag) and an associated hyperlink for the image are specifed.
Working Example
Extract from ‘Freedom’ : Toongabbie Anglican Church
Click one of the following links to listen to an audio stream of a short sermon extract:
Beyond this simple example
Other features that can be provided using metafiles:
- A pre-sermon ‘advertisement’, indicating that the source of the content they are about to listen to. This could be a generic presentation that is utilised for all sermons distributed on your site.
- Multiple files can be presented as a play-list, which the user navigates within their media player – much like playing a CD of several tracks.
Also, for a more integrated look, media player controls can be embedded within an HTML document.
References, tools and further reading
Windows Media
Real Format