我正在使用飞行中的精彩故事信息来生成鼠标悬停事件的声音,这是数字写作项目的一部分。我目前拥有的草稿会保持声音停止,或者在Chrome中显示“Aw,Snap”页面。该页面位于http://www.nathan-walker.co.uk/sounding
我还将 channel 增加到300个(这可能是我所需要的)。另一个问题是我猜是因为我使用的是WAV文件,它们很大!如果有人可以提出替代方案或知道某种解决方法,那将是很棒的!
<audio id="multiaudio1" src="audio/flute_c_long_01.wav" preload="auto"></audio>
<audio id="multiaudio2" src="audio/piano_chord.wav" preload="auto"></audio>
<audio id="multiaudio3" src="audio/synth_vox.wav" preload="auto"></audio>
<audio id="multiaudio4" src="audio/shimmer.wav" preload="auto"></audio>
<audio id="multiaudio5" src="audio/sweep.wav" preload="auto"></audio>
<a href="javascript:play_multi_sound('multiaudio1');">Flute</a><br />
<a href="javascript:play_multi_sound('multiaudio2');">Piano Chord</a><br />
<a href="javascript:play_multi_sound('multiaudio3');">Synth Vox</a><br />
<a href="javascript:play_multi_sound('multiaudio4');">Shimmer</a><br />
<a href="javascript:play_multi_sound('multiaudio5');">Sweep</a><br />
<script type="text/javascript">
var channel_max = 10; // number of channels
audiochannels = new Array();
for (a=0;a<channel_max;a++) { // prepare the channels
audiochannels[a] = new Array();
audiochannels[a]['channel'] = new Audio(); // create a new audio object
audiochannels[a]['finished'] = -1; // expected end time for this channel
}
function play_multi_sound(s) {
for (a=0;a<audiochannels.length;a++) {
thistime = new Date();
if (audiochannels[a]['finished'] < thistime.getTime()) { // is this channel finished?
audiochannels[a]['finished'] = thistime.getTime() + document.getElementById(s).duration*1000;
audiochannels[a]['channel'].src = document.getElementById(s).src;
audiochannels[a]['channel'].load();
audiochannels[a]['channel'].play();
break;
}
}
}
最佳答案
首先,对于Web浏览器而言,300个 channel 是非常极端的。您可以轻松将其崩溃。 Chrome设置了很多虚拟内存分页(大约是我的第二大页面的4倍),然后不久便崩溃了。
第二,为什么要使用wavs?我会将它们转换为压缩格式,并让浏览器的播放器即时对其进行解压缩,以便节省空间。
最后,如果可能的话,我会考虑使用Web Audio API,而不是使用<audio>
元素(仅用于简单的媒体播放),它肯定是在当前的Chrome和Safari版本中。与<audio>
标记相比,它具有更高的性能建模能力,这是您在类似实验中需要的。只要遵循说明,就不会很难使用。这是教程的链接。:http://creativejs.com/resources/web-audio-api-getting-started/
关于html - 带有鼠标悬停的多 channel 音频HTML5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17095889/