HTML5 Audio and JavaScript Control - Geovin Du Dream Park_H5之家

<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Playing Sound from JavaScript</title> <script src="mootools-1.2.4-core.js"></script> <script src="sif_discussion.js"></script> <script language="JavaScript"> var topic = 'audio'; var comment_teaser = 'Please leave a comment...'; window.onload = reload_comments; </script> </head> <body> <h2><a></a>Simple JavaScript Control</h2> <div> <audio preload="auto"><source src="flute_c_long_01.wav" type="audio/wav"></audio> <p> <a href="javascript:play_single_sound();">Play 5-sec sound on single channel</a> </p> </div> <script type="text/javascript"> function play_single_sound() { document.getElementById('audiotag1').play(); } </script> <h2><a></a>Rotating Audio Channels</h2> <div> <audio src="flute_c_long_01.wav" preload="auto"></audio> <audio src="piano_chord.wav" preload="auto"></audio> <audio src="synth_vox.wav" preload="auto"></audio> <audio src="shimmer.wav" preload="auto"></audio> <audio src="sweep.wav" preload="auto"></audio> <p> <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 /> </p> </div> <script type="text/javascript"> var channel_max = 10; audiochannels = new Array(); for (a=0;a<channel_max;a++) { audiochannels[a] = new Array(); audiochannels[a]['channel'] = new Audio(); audiochannels[a]['finished'] = -1; } function play_multi_sound(s) { for (a=0;a<audiochannels.length;a++) { thistime = new Date(); if (audiochannels[a]['finished'] < thistime.getTime()) { 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; } } } </script> </body> </html>