Load External Content from JS file modified outside of Hype

(Jose) #1


I’ve done a podcast player that needs to be updated with a new audio periodically. The mp3 will be changed every week just replacing the mp3 file, but I don’t know how to change the audio title (it is a text box) without having to touch the coding every episode. I think it will be great if it is possible to add a file with the episode name and the text box will be updated with that value. Is this possible?


(Mark Hunte) #2

The simplest way I can think of is to us a JS file external to you project.

Here is an example.

In this project I have a text box with a unique id.

There is a function that sets the innHTML of the text box. ( called on scene load)

hypeDocument.getElementById('podTitle').innerHTML = window.podTitleText;

The title text that the function uses is from a global var.

The global var window.podTitleText is from the external JS file.

To get this I placed in the Head tag (document Inspector-> edit Head)

This code.

<script type="text/javascript" src="./podTitle/podTitle.js"></script>

The ./podTitle/podTitle.js is full path of the file. the ./ is used to indicate to go out to the parent directory of the exported html file.

So now When I export the project, I will then create a new folder named podTitle in the same directory as the .html file that is generated on export.

In the podTitle folder, I will place a plain text file named podTitle.js.

The podTitle.js will be loaded when the web page is loaded.

In the podTitle.js I have a single code line:

window.podTitleText = "This is a podcast"

So now all I have to do is place the podcast as normal and then edit the line of code in the podTitle.js


window.podTitleText = “This a podcast number 45”

podCastTitleExample.zip (77.8 KB)

Loading Drop-Down Menus with content
(Jose) #3

Wow, it sounds great!! I’ll try it and tell you if it works.


(Jose) #4

Yes!! It worked. Thanks.

Only one more question: for some reasons I don´t want to have only one file with all the titles for all the podcasts. Is it possible to have different .js files, one for each podcast (podcast1.js, podcast2.js, etc)?


(Mark Hunte) #5


Repeat each step above for each one.

I.e a podcast2.js

would be :

in Hype function

hypeDocument.getElementById('podTitle2').innerHTML = window.podTitle2Text;


<script type="text/javascript" src="./podTitle/podcast2.js"></script>

podTitle folder

podcast2.js file

podcast2.js file’s code

window.podTitle2Text = "This is a podcast"

(Jose) #6