Guest  Logged In, 
Members Online: 18
 Support > How to Embed TouchPlayer in a Web Page > 
How to Embed TouchPlayer in a Web Browser Page

Here is what you have to do to embed a Touch synth in a web page, whether it's your synth or a synth located on another site made by someone else. First, if you haven't done so already, click to see some examples of embedded Touch content.

Comments? Questions? Created your first embedded page? Post it here.

JAVASCRIPT to Embed a Touch Synth in a Browser Window

This is how you set up an HTML page to include a Touch synth on a web page.

First, copy the following Javascript and paste it into an HTML page between the BODY tags. Then change the synth and image parameters in Initialization below.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
jsVersion = 1.1;
////////////////////////////////////////////////////////////////////////
////////////////////////////// Initialization ///////////////////////////
////////////////////////////////////////////////////////////////////////
SYNTH_PATH = "http://www.derivativeinc.com/Artworks/Labels/El_Kabong/JetGirl/8/JetGirl.8.tos"
SYNTH_WIDTH = "800"
SYNTH_HEIGHT = "600"
SYNTH_BGCOLOR = "#000000"
TRACK_PATH = ""
IMAGE_PATH = "http://www.derivativeinc.com/Artworks/Labels/El_Kabong/JetGirl/8/JetGirl.8.E.jpg"
IMAGE_WIDTH = "400"
IMAGE_HEIGHT = "300"
////////////////////////////////////////////////////////////////////////
//////////////////////// End of Initialization /////////////////////////
////////////////////////////////////////////////////////////////////////
var isNS = (navigator.appName == "Netscape") ? true : false;
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.indexOf("Windows") != -1) ? true : false;
var TouchPlayerInstalled = false;
var TouchSynth = '<OBJECT ID="TouchCtl"'
+ 'CLASSID="CLSID:61F7D8BA-3301-11D6-94BE-0050BAC957FB"'
+ 'codebase="http://www.derivativeinc.com/'
+ 'Tools/Touch017/Downloads/touchdownloader.exe#version=1,0,1,7"'
+ 'WIDTH=" '+SYNTH_WIDTH+' " HEIGHT=" '+SYNTH_HEIGHT+' ">'
+ '<PARAM NAME="SRC" VALUE=" '+SYNTH_PATH+' ">'
+ '<PARAM NAME="BGCOLOR" VALUE=" '+SYNTH_BGCOLOR+' ">'
+ '<EMBED SRC=" '+SYNTH_PATH+' "'
+ 'WIDTH=" '+SYNTH_WIDTH+' " HEIGHT=" '+SYNTH_HEIGHT+' "'
+ 'BGCOLOR=" '+SYNTH_BGCOLOR+' '
+ 'TYPE="application/x-deriv.touchplayer">'
+ '</EMBED>'
+ '</OBJECT>';
var TouchImage = '<a href="http://www.derivativeinc.com/tools/tools_plyr_download.asp">'
+ '<IMG SRC=" '+IMAGE_PATH+' "'
+ ' HEIGHT=" '+IMAGE_HEIGHT+' " WIDTH=" '+IMAGE_WIDTH+' " border=0 alt="Download the Touch advanced 3D plug-in from Derivative"></a>'
+ '<br>To play the Touch 3D synth, click on the image above to download the Touch advanced 3D plug-in from Derivative. ';
if (isWin && isIE) {
document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('TouchPlayerInstalled = (IsObject(CreateObject("TouchIE.TouchCtl"))) \n');
document.write('</SCR' + 'IPT\> \n');
if (TouchPlayerInstalled){
document.write(TouchSynth);
}else{
document.write(TouchImage);}
}else{
if (isWin && isNS) {
var TouchMode = 0;
for(var i=0;i<20;i++){
if (navigator.plugins)
{
if (navigator.plugins[i]) {
var TouchName = navigator.plugins[i].name;
var TouchDescription = navigator.plugins[i].description;
var TouchFilename = navigator.plugins[i].filename;
var TouchMimeCount = navigator.plugins[i].length;
if (TouchDescription == "TouchSynth") {
document.write(TouchSynth);
TouchMode = 1;
}}}}
if (TouchMode == 0) { document.write(TouchImage); }
}else{
document.write(TouchImage);
}}
// End -->
</script>

 

ASP to Embed a Touch Synth in a Browser Window

ASP or Active Server Pages is part of Microsoft Internet Information Server (IIS), and thereby part of the Windows NT 4 or 2000 operating system. If you have access to such servers, you can use ASP Touch Detection. It is easy to use and easy to configure.

This is how you set up your .asp to include a Touch synth on a web page. First, in your .asp, set the synth's path, width, height and (optional) background color and text with the values you want, as in the code below:

<%
 session("path") = "http://www.derivativeinc.com/Artworks/Labels/El_Kabong/JetGirl/8/JetGirl.8.tos"
session("width") = "400"
session("height") = "300"
session("bgcolor") = "#808080"

SynthText = "This is a sample of TouchPlayer embedded in an internet browser."
SynthText = SynthText & "<br>"

ImageText = "To continue, click on the image above "
ImageText = ImageText & "to download the Touch advanced 3D plug-in from Derivative."
%>
<!--#include virtual="http://www.derivativeinc.com/Common/DetectTouchPlayer.asp"-->

To display a JPEG image in the window before the user downloads the player, put the JPEG in the same folder as the .tos, but with a .jpg suffix. In the above example, the image would be in http://www.derivativeinc.com/Artworks/Labels/El_Kabong/Dancer/9/Dancer.9.jpg.

If path is is on the same site as your synth, you can drop the "http://www.xxxx.com" from your path name. Note that DetectTouchPlayer.asp is on the Derivative site. You may want to put that file on a local site and point to that instead.

Currently, the version of Touch isn't specified or required. You will eventually be able to force the synth to be played with a certain version or later.

Choosing the Control Panel the Touch Plugin will Display

Artists using TouchDesigner will choose which control panel gets selected by the plug-in, new fields in the Output Driver were created called "Browser Net" and "Browser CHOP". By default it is the 3D camera port only, the Viewer CHOP.

The new "EMBEDDED" variable can be used in TouchDesigner when you want something different to happen when the synth is running embedded in a web page versus running standalone in TouchPlayer, Mixer or Designer. Embedded is set to 1 if embedded, 0 otherwise. For example, when embedded you may want the synth to have in-camera heads-up controls, whereas standalone you may want MIDI-like controls ins a separate control panel. In this case, you can use EMBEDDED in a Switch CHOP.

Tips on Synths embedded in Browsers

Keep the synth file size down by minimizing texture sizes and quantities. Instead of embedding an MP3 file in a Touch synth, make it a reference to a URL so you can download the MP3 as the synth is playing.

Making a Synth Background Color Match a Web Page Background Color

In TouchDesigner. use 'bgcolor' (camera background color channels). Set the Camera Object's flag 'Use Browser Color if Available'.

To set the color in the HTML or .asp, you can follow the guidelines in the section above, or when using more raw .html or .asp:

  • html (internet explorer) example:·
    • <PARAM name="bgcolor" value="255 0 127">
  • html (netscape) example:
    • bgcolor="123 53 23"

There is support for the two formats:

  • bgcolor="#RRGGBB" (uses hex digits)
  • bgcolor="r g b" (3 decimal values, as above).

 

Making URL Links in Touch Synths

Use the Pick CHOP to select Touch objects that you want to link to. Send the Pick CHOP's "state" channel to a Logic CHOP with an off-to-on command script that looks like:

viewfile http://www.derivativeinc.com/Artworks/Artworks.asp