使用与浏览器无关的方式来制作带有音频的网络幻灯片有哪些选项？
我需要组装一个可以生成网络幻灯片的应用程序。
它需要能够在多个图像之间（在浏览器中）进行精美的转换，并在显示这些图像时提供音频。图像之间的转换必须延迟到音频结束为止（每个图像都有自己的音轨）。
它还需要使用程序创建，因此不需要花哨的 GUI 设计工具 - 我希望能够生成 XML 或纯文本文件，这些文件可以直接加载到浏览器中（如 jQuery）或使用可自由分发的工具进行编译(a la Open Laszlo)。
迄今为止我所有的 Web 工作都是 J2EE，但我认为是时候检查一些更丰富的客户端工具了。我快速浏览了 Open Laszlo 和 jQuery，但我不确定如何将幻灯片与音频同步。基本过程是：
- 启动音轨。
- 过渡到图像。
- 等到音轨完成。
- 冲洗并重复。
jQuery 可以实现这种功能吗？似乎有大量的 DOM 操作内容，但我找不到任何关于音频同步的明显信息。
如果您有其他建议，我愿意接受，但对可免费分发工具的要求是绝对的。这可能会排除大多数 Adobe Flash 类型的解决方案。
I have a requirement to put together an application which will generate a web slide show.
It needs to be able to do fancy transitions between multiple images (in a browser) and also provide audio while those images are being displayed. The transitions between images must be delayed until the audio is finished (each image will have its own audio track).
It also needs to be created with a program so no fancy GUI designer tools - I want to be able to just generate XML or plain text files which can either be loaded directly into a browser (a la jQuery) or compiled with a freely distributable tool (a la Open Laszlo).
All my web work to date has been J2EE but I think it's time I checked out some of the richer client-side tools. I've had a quick look into both Open Laszlo and jQuery but I'm not sure how I would go about syncing the slides with the audio. The basic process will be:
- kick off audio track.
- transition to image.
- wait until audio track is finished.
- rinse and repeat.
Is this sort of thing possible with jQuery? There seems to be a huge amount of DOM-manipulation stuff but I can't find anything obvious about the audio synchronization.
I'm open to other suggestions if you have them but the requirement for freely distributable tools is an absolute. This will probably rule out the majority of the Adobe Flash type solutions.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我推荐 jPlayer http://www.happyworm.com/jquery/jplayer/ 作为您的音频事件处理程序。 jPlayer 很棒，因为它还支持 HTML5 音频。
然后，您可以使用 jPlayer 中的 onSoundComplete 回调函数来触发图像更改。有太多的图像滚动/幻灯片 jQuery 无法列出，但我个人喜欢 Cycle： http://malsup.com /jquery/循环/
I recommend jPlayer http://www.happyworm.com/jquery/jplayer/ as your Audio event handler. jPlayer is great because it also supports HTML5 audio.
You can then use the onSoundComplete callback function within jPlayer to trigger an image change. There are too many image scroller/slideshow jQuery to list, but personally I like Cycle: http://malsup.com/jquery/cycle/
虽然 html5 中有这个新的明亮闪亮的音频标签，但在大多数浏览器浏览器支持它之前，人们确实无法使用它。这意味着闪存是音频部分的唯一选择。尽管我认为在整个应用程序中使用 Flash/Actionscript 可能是最简单的方法，但您也可以使用多种技术。我可以推荐 Soundmanger 作为用于控制音频的非常方便的 javascript 库。它与一个小型 Flash 影片配合使用，该影片实际上播放剪辑，但将所有接口隐藏在一个漂亮的 api 后面（也包括一堆事件）。
所以这可能是您的音频后端。为了控制整个场景，我确实会选择 jQuery，但这是一个品味问题。最简单的方法是获取 JSON 文件（并“评估”它或使用 JSON2 脚本) 其中包含所有图像和音频 URL（或直接在 js 代码或其他内容中生成）。将获取的剪辑提供给您的 Soundmanager 实例，预加载部分或全部图像，然后就可以开始了。
当谈到图像过渡效果时，您可以使用 jQuery/JS/HTML 做很多事情，但是使用 Flash 可以做更多的事情，这导致我最初建议在整个项目中使用 Flash 和 ActionScript。
希望这能有所帮助，祝你好运！
ps 这里是 javascript/音频同步的示例。该页面试图模仿音乐唱片（不幸的是德语），等待歌曲完成；）。
While there is this new bright and shiny audio tag in html5, one really cannot use it until most of the surfers browser support it. This means flash is the only option for the audio part. Although I think using Flash/Actionscript for the whole application may be the easy way you can also use multiple technologies. I can recommend Soundmanger as very convenient javascript library for controlling audio. It works with a tiny flash movie which actually plays the clip, but hides all interfacing behind a nice api (includes a bunch of events, too).
So this may be your audio backend. For controlling the whole scene I would indeed choose jQuery, but thats a matter of taste. The easiest way would be to fetch a JSON file (and either "eval" it or parse with JSON2 Script) which contains all the image and audio URLs (or generate it directly in your js code or something). Feed your Soundmanager instance with the fetched clips, preload some or all of your images and your ready to go.
When it comes to image transition effects, you can do a lot with jQuery/JS/HTML, but you can do MUCH more with Flash, which leads to my initial suggestion to use Flash and ActionScript for the whole project.
Hoping this helps a bit, good luck!
p.s. Here is an example of javascript/audio synchronization. The page tries to mimic a music record (in German unfortunately), wait for a song to finish ;).
您可以使用 Flex 库在 ActionScript 3 中编写它（SDK 是免费的）。我不知道这里有任何其他选项，特别是考虑到与音频要求的同步。
使用 AS3，您可以加载描述幻灯片的 XML 文件、下载适当的资源、使用您喜欢的任何时间并编写您能想到的任何效果。
You could write it in ActionScript 3 with the Flex libraries (the SDK is free). I don't know of any other option here especially considering the synchronization with audio requirement.
Using AS3 you can load an XML file that describes your slideshow, download the appropriate assets, use whatever timing you like and write pretty much whatever effects you can think of.
是的，jQuery 可以做到这一点。对于音频，请使用 HTML5 的音频标签以及 Opera 和 IE 的 Flash 回退功能。
当您更改 img 时，您可以更改音频 url。
Yes, jQuery can do this. For audio, use HTML5's audio tag with flash fallback for Opera&IE.
When you change img, you can change audio url.
这可能有些过头了，但如果可再发行的播放器是一个关键标准，您可以尝试使用 Unity。网络播放器免费且可自由再分发。
It's probably overkill but if a redistributable player is a key criteria you could try using Unity. The web player is free and freely redistributable.