将音频同步到图片转盘

Question

Is it possible to sync audio to a picture carrousel without using the canvas? Im currently using setInterval to realize the carrousel. I dont want to use flash and if possible and not too hard to realize, I want to do this without the canvas.

Answer 1

Have you tried a canvas?

Assuming you're using an <audio> element, you can get its currentTime property. This will tell you where the playhead is. You can use this information to change the carousel when the audio passes a certain position, or you can set it to change the audio position when the carousel changes. Whatever works better for what you're doing.

Answer 2

What do you mean by realize the carousel?

I would set a specific timestamp when you want the image to show. So at 12 seconds you want to show image.

You might want to also make sure that the audio is loaded. You can use canPlayThrough to check and see if enough is loaded to play through or you can use audio.buffered.end(0) to check against the length of the audio file and make sure the entire thing has loaded.

Here is a good article for more on this: http://html5doctor.com/html5-audio-the-state-of-play/

When the audio is loaded you call a function and pass in the timestamp and set it as the setInterval time. So at timestamp * 1000 the function will fire and show the image that is passed at that timestamp.

You could also try and use audio.currentTime and fire then, more on that in the article above as well. Let me know if you have a more specific question.