This is my first post on this forum so I hope I've chosen the right place for it.

 

Have spent the past few years doing microsites in Flash, basically adapting printed booklets to an interactive format for use online. All sites have to have voiceover narration, all the text is read out loud. There's some animation but it's fairly basic, just builds and fade-ins and outs. These are information sites commissioned by government departments so SEO, marketing, google rankins, etc. are all irrelevant.

 

Flash has worked very well because I can use any font (they like certain fonts with certain characteristics like the small 'a' in Futura), they work on every browser and everyone's got Flash. However, more and more people are using tablets and smartphones which don't support Flash.

 

I'm looking for resources for developing the same kind of thing in HTML5. The main issue is the sound, which has to come in at the same time as the text. In Flash this is done in Actionscript, loading external mp3 files at runtime.

 

I was also wondering whether there are any frameworks and/or development environments to simplify the process. I have Dreamweaver but it's just for standard HTML pages. I have good knowledge of HTML and Actionscript which is quite similar to Javascript.

 

Many thanks.

I don't think there's going to be anything out there where you can load in your flash and some nice HTML5 pops out the other end. I think you will have to do this yourself. Having said that, it's entirely possible and your reasons for doing it are very worthwhile.

 

For your audio, my suggestion is that you use jQuery to trigger the audio and at the same time display the text. You could have a simple "Play" button, when clicked, the audio plays and the text shows. That should do the trick?

 

<audio id="mySoundClip">
<source src="audio/track1.mp3"></source>
<source src="audio/track1.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>

<a href="#" class="play">play</a>

 

Bare in mind audio format support varies from browser to browser so you will need multiple files as per above.

 

var audio = $("#mySoundClip")[0];
$("a.play").onclick(function() {
 audio.play();
});

 

And a simple little snippet of jQuery like the above should do the trick. I don't have sound at work so I can't test for sure, sorry!