[TWC] problem embedding html5 audio player

sklpns

unread,

Oct 1, 2015, 8:23:52 AM10/1/15

to TiddlyWiki

Hello TW friends.

I'm trying to embed html5 audio players in a TWC v 2.8.1 using the audio.js script
(http://kolber.github.io/audiojs/)

I thought it would only require linking to the relevant scripts in the MarkupPreHead tiddler
and placing the html code with the mp3 files in any given tiddler but I can't get it to work.

Please find attached two MTC's:

The test6.html file is a simple html file (not tiddlywiki) where the code works (although the music autoplays
where maybe it shouldn't).

The empty.html file is a tiddlywiki classic where the all the script from the above working example is placed in the
MarkupPreHead tiddler and the html code is placed in the AudioTest tiddler where the player is expected to show up
but it doesn't.

Any ideas?
Thanks in advance
sklpns

PS1. My real case scenario MarkupPreHead tiddler is far more complicated (linking to various scripts etc) but I thought it best
to get it to work in a simple scenario first.
PS2. Trying to get it to work using other libraries (for instance https://amazingaudioplayer.com/) and/or other TWC versions I noticed that sometimes where the player doesn't show up it appears when the MarkupPreHead tiddler is reopened or, in browsers other than firefox (Chrome, UC Browser) double clicked and then closed. Is that a hint, maybe?

Thanks again

test6.html

empty.html

Tobias Beer

unread,

Oct 1, 2015, 4:12:28 PM10/1/15

to tiddl...@googlegroups.com

Hi sklpns,

Looks like you did a lot of copy & pasta there...

The first thing I notice when looking at your MarkupPreHead
is that you're trying to include jQuery again even though
it's already part of TiddlyWiki. That might be a problem.

All those styles, scratch them

— or put them im your StyleSheet tiddler if you actually know what they're for —
It's important to reduce the problem area to the smallest possible.

As for the actual script, it can't be invoked that way.

Why? Because your audio elements aren't even rendered

when TiddlyWiki has finished starting!

So, there's two steps forward. Try to:

Step 1:

Load the library via MarkupPreHead ...but not jQuery again!

Step 2:

Render your audio tags embedded in <html>...</html>

and right after that invoke your script (requires InlineJavascriptPlugin from tiddlytools)

~

As for those keyboard controls your code wants to register, I'd say:

Forget about them, you're not on a static html page.

So, anything $(document).keydown(function(e) {...} ...remove it.

But then, where did you get all that code from?
Because you have no ol li elements, do you?
And I don't see this kind of code here:
http://jd.heliohost.org/audio.js/x.html

FWIW, I'm listening to that Notorious B.I.G album now ...smooth.

Best wishes,

— tb

sklpns

unread,

Oct 1, 2015, 6:25:56 PM10/1/15

to TiddlyWiki

Hey Tobias,

indeed, when it comes to coding and cooking copy and pasta is the best I can do, lol

Thank you very much for your response.

Please find attached my new attempt.

In the MarkupPreHead tiddler there's only the link to the audio.js library.

All the css is moved to the StyleSheet tiddler.

InlineJavascript plugin is installed.

All the keyboard controls script is removed.

The rest is placed under the html code in the AudioTest tiddler
(btw I'm keeping the playlist code as per http://kolber.github.io/audiojs/demos/test6.html
but I removed all the ol li stuff just in case)

Also, alongside the playlist code, I' ve placed the simplest
possible audio code (ie <html><audio src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3" preload="auto" /></html>)at the top of the
AudioTest tiddler.

Doesn't work, just get ''SyntaxError: missing ) after argument list'' at the bottom of the AudioTest tiddler.

(is that a clue?)

Tobias, thanks again for your help, both now and for all the times in the past.

cheers
sklpns

empty - 1.html

Tobias Beer

unread,

Oct 1, 2015, 8:02:10 PM10/1/15

to tiddl...@googlegroups.com

Hi sklpns,

before I do anymore testing with this "library"

that doesn't appear to provide an intuitive api,

did you ever try to just use...

<html><audio controls>
  <source src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3" type="audio/mpeg">
  Sorry, your browser does not support the audio tag.
</audio>
</html>

?

(At last this would establish, whether html5

audio tags work for you, in your browser.)

If that works, then we can maybe move on to step 2

and see if there's a way to get playlists going.

Best wishes,

— tb

sklpns

unread,

Oct 2, 2015, 6:01:57 AM10/2/15

to TiddlyWiki

Hey Tobias,

confirm, the above code works ok in my TW in all my browsers.

Thanks again,

sklpns

Tobias Beer

unread,

Oct 2, 2015, 4:24:47 PM10/2/15

to tiddl...@googlegroups.com

Hi sklpns,

confirm, the above code works ok in my TW in all my browsers.

Did some fiddling, dropped audiojs and created this:

http://html5player.tiddlyspace.com

Best wishes,

— tb

sklpns

unread,

Oct 3, 2015, 10:13:38 AM10/3/15

to TiddlyWiki

Hey Tobias,

every time I have a question you come up with a plugin!

Seems to work great, even with my real case TW which has a rather peculiar set up.

Let me tell you, If I may, the kind of trouble this gets me out from:

Not knowing javascript or any kind of coding, in order to show an
html5 audio player (android compatible is the goal)
in my tw, in an audio player div, I basically have to:

1. Create an xml playlist with mp3 files
2. Create an html page with the player and host it somewhere
3. Iframe the aforementioned page in a tiddler in a separate TW
4. Iframe the aformentioned tiddler in my mainTW.

Same with flash, host the swf and xml files elsewhere and use them via
a separate, audio player repository TW.

Granted, coding knowledge would have reduced the red tape anyway.
The above set up is far from clever, it just works.

But if this plugin works like I think it will in my actual TW I can have playlists and players all in my main TW, which for me is awesome, albeit with the help of a pseudostory set up (opening player tiddlers in a separate pseudostory column).

Thank you very much Tobias, I really appreciate your help.

sklpns

PS. Also great, people still getting involved with TWC.
Not having jumped the TW5 train yet, this is encouraging!

Tobias Beer

unread,

Oct 3, 2015, 10:28:13 AM10/3/15

to tiddl...@googlegroups.com

Hi sklpns,

(android compatible is the goal)

I hope your android device supports html5.

If it doesn't I don't think I'll give audiojs another try.

It just has virtually no meaningful API to hook into.

PS. Also great, people still getting involved with TWC.
Not having jumped the TW5 train yet, this is encouraging!

I have sure jumped on that train but...

I see no reason to leave that other train hanging.

It kinda bugs me just how easy it was to develop that in TWC

and how hard it will be doing the same in TW5,

that is without basic and meaningful DOM manipulation via jQuery.

With jQuery, I could port this thing to TW5 in minutes.

I want to be able to create cool things like these,

playing audio and video form a playlist,

rather than a wiki that is optimized

to remember which track I played last time

and at what second I clicked the pause button.

...but sure, there are practical uses for such things, no doubt.

Best wishes,

— tb

sklpns

unread,

Oct 3, 2015, 2:53:50 PM10/3/15

to TiddlyWiki

Hi Tobias,

so far my android devices (both a new smartphone and an older, low spec, tablet)
seem to respond well to the plugin with UC browser (apart from a zoom in-out problem but that's
irrelevant), so I would urge you
not to spend any more time on audiojs, so far your plugin does the job a ok.

Just my two cents here: you might however wanna have a look at http://www.wimpyplayer.com/, especially
if you're thinking about a twc/tw5 implementation: in my html5 audio player quest
I found it to be the simplest in implementation with nice skins etc. Tried it last night in twc
per their instructions but couldn't get it to work (surprise).

Thanks again for your time

sklpns

Reply all

Reply to author

Forward