HTML5 Audio and JavaScript Control
2015-11-30 10:49
537 查看
IE8 以下无效
IE8 有效:
IE 8以下无效:
参考资源:
/// https://github.com/CreateJS/SoundJS /// http://madrobby.github.io/scriptaculous/sound/ /// https://css-tricks.com/examples/SoundOnHover/ /// https://github.com/scottschiller/SoundManager2/ /// http://www.schillmania.com/projects/soundmanager2/ http://www.sitepoint.com/10-jquery-audio/ http://devreactor.com/projects/drplayer.aspx
Source
Source
Source
Source
Source
Source
Source
Source
Source
> Find and play all tracks from SoundCloud
> Save playlist to your Google Account
> Make smart playlists based on genre, BPM, etc.
> Share your ready-made playlists with your friends and
> Collaborate in making the best playlists ever.
Source
<!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 name="simpleaudio"></a>Simple JavaScript Control</h2> <div class="audiocontainer"> <audio id="audiotag1" 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 name="rotatingaudio"></a>Rotating Audio Channels</h2> <div class="audiocontainer"> <audio id="multiaudio1" src="flute_c_long_01.wav" preload="auto"></audio> <audio id="multiaudio2" src="piano_chord.wav" preload="auto"></audio> <audio id="multiaudio3" src="synth_vox.wav" preload="auto"></audio> <audio id="multiaudio4" src="shimmer.wav" preload="auto"></audio> <audio id="multiaudio5" 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>
IE8 有效:
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Playing Sound from JavaScript</title> </head> <body> <script type="text/javascript" language="JavaScript"> <!-- function playSound(audioURL) { if (document.all) document.all['BGSOUND_ID'].src=audioURL; else self.iplayer.location.replace('jsplayer.html?'+audioURL); } function stopSound() { if (document.all) document.all['BGSOUND_ID'].src='jsilence.mid'; else self.iplayer.location.replace('jsplayer.html?stop'); } //--> </script> <BGSOUND id="BGSOUND_ID" LOOP=1 SRC="jsilence.mid"> <!EMBED NAME="Bach" SRC="Bach.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND!> <form name=myform> <input type=button value="Play Sound" onClick="playSound('Bach.mid')"> <input type=button value="Stop Sound" onClick="stopSound()"> </form> </body> </html>
IE 8以下无效:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <meta charset="utf-8" /> <title>Demo : jPlayer as a text based audio player</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <meta content="audio player" name="keywords"> <meta content="audio player" name="description"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ // Local copy of jQuery selectors, for performance. var my_jPlayer = $("#jquery_jplayer"), my_trackName = $("#jp_container .track-name"), my_playState = $("#jp_container .play-state"), my_extraPlayInfo = $("#jp_container .extra-play-info"); // Some options var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS. opt_auto_play = true, // If true, when a track is selected, it will auto-play. opt_text_playing = "Now playing", // Text when playing opt_text_selected = "Track selected"; // Text when not playing // A flag to capture the first track var first_track = true; // Change the time format $.jPlayer.timeFormat.padMin = false; $.jPlayer.timeFormat.padSec = false; $.jPlayer.timeFormat.sepMin = " min "; $.jPlayer.timeFormat.sepSec = " sec"; // Initialize the play state text my_playState.text(opt_text_selected); // Instance jPlayer my_jPlayer.jPlayer({ ready: function () { $("#jp_container .track-default").click(); }, timeupdate: function(event) { my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%"); }, play: function(event) { my_playState.text(opt_text_playing); }, pause: function(event) { my_playState.text(opt_text_selected); }, ended: function(event) { my_playState.text(opt_text_selected); }, swfPath: "../../dist/jplayer", cssSelectorAncestor: "#jp_container", supplied: "mp3", wmode: "window" }); // Create click handlers for the different tracks $("#jp_container .track").click(function(e) { my_trackName.text($(this).text()); my_jPlayer.jPlayer("setMedia", { mp3: $(this).attr("href") }); if((opt_play_first && first_track) || (opt_auto_play && !first_track)) { my_jPlayer.jPlayer("play"); } first_track = false; $(this).blur(); return false; }); }); //]]> </script> <style> <!-- .demo-container { border: 1px solid #009BE3; padding:0 20px; font-family: "Myriad Pro Regular","Trebuchet MS"; } .demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active { color: #009BE3; } .demo-container ul { list-style-type:none; padding:0; margin:1em 0; width:100%; overflow:hidden; } .demo-container ul span { color: #A0A600; } .demo-container li { float:left; margin-right:1em; } .demo-container p span.track-name { color: #CC0090; } --> </style> </head> <body> <div id="jquery_jplayer"></div> <!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features --> <div id="jp_container" class="demo-container"> <ul> <li><span>Select a track : </span></li> <li><a href="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" class="track track-default"> Cro Magnon Man</a></li> <li> | </li> <li><a href="http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3" class="track"> The Separation</a></li> <li> | </li> <li><a href="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3" class="track"> Lismore</a></li> <li> | </li> <li><a href="http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3" class="track"> Thin Ice</a></li> </ul> <p> <span class="play-state"></span> : <span class="track-name">nothing</span> at <span class="extra-play-info"></span> of <span class="jp-duration"></span>, which is <span class="jp-current-time"></span> </p> <ul> <li><a class="jp-play" href="#">Play</a></li> <li><a class="jp-pause" href="#">Pause</a></li> <li><a class="jp-stop" href="#">Stop</a></li> </ul> <ul> <li>volume :</li> <li><a class="jp-mute" href="#">Mute</a></li> <li><a class="jp-unmute" href="#">Unmute</a></li> <li> <a class="jp-volume-bar" href="#">|<---------->|</a></li> <li><a class="jp-volume-max" href="#">Max</a></li> </ul> </div> </body> </html>
参考资源:
/// https://github.com/CreateJS/SoundJS /// http://madrobby.github.io/scriptaculous/sound/ /// https://css-tricks.com/examples/SoundOnHover/ /// https://github.com/scottschiller/SoundManager2/ /// http://www.schillmania.com/projects/soundmanager2/ http://www.sitepoint.com/10-jquery-audio/ http://devreactor.com/projects/drplayer.aspx
1. jMP3 (javaScript MP3 player)
This is an easy way make any MP3 playable directly on most any web site (to those with Flash & JavaScript enabled), using the sleek Flash Single MP3 Player & the fantabulous jQuery.Source
2. jQuery Multimedia Portfolio
This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.Source
3. jMedia
A jQuery plugin for unobtrusive, accessible and flexible multi-media embedding.Source
4. drPlayer
A simple and free jQuery plugin for creating MP3 playlists.Source
5. Simple Player – A very simple HTML5 audio player plugin for jQuery
A jQuery plugin that allows web developers to control audio files on their webpage. Supports style up via CSS. All browsers that supports HTML5 audio tag that allow mp3 or ogg format supported by this plugin.Source
6. jme
An HTML5 audio / video development kit with Flash Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.Source
7. Night coding a JQuery plugin for StreamPlug
An advanced media player for the web: It decodes MPEG4 video streams such as h264, and vorbis audio from a remote file using a simple http server. This JQuery plugin will help you add a streamplug player on your website/blog, a single line is sufficient to display the player to the right size, and play the media on the fly, without any buffering time!Source
8. jlEmbed For jQuery
A plugin for jQuery, which makes it easier to add embedded media players to your webpage. With support for Adobe Flash, Quicktime, Real Player, Silverlight, Windows Media Player, and YouTube, you will no longer need to hard-code lengthy, cumbersome, and invalid HTML for your music or videos.Source
9. jPlayer – The jQuery HTML5 Audio / Video Library
Is the completely free and open source (GPL/MIT) media library. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.Source
10. The Cloud Player- Web-based iTunes Clone using jQuery
The Cloud Player is a web-based music player that lets you.> Find and play all tracks from SoundCloud
> Save playlist to your Google Account
> Make smart playlists based on genre, BPM, etc.
> Share your ready-made playlists with your friends and
> Collaborate in making the best playlists ever.
Source
相关文章推荐
- javaScript学习(3)
- js禁用回退键[backspace键]浏览历史跳转的解决办法
- 纯脚本组装Json格式字符串
- javascript 实现两个标准时间差几天
- javascript作用域链(Scope Chain)用法实例解析
- JavaScript学习(2)
- js封装下拉框,实现重复利用
- 最精简的js代码,实现checkbox,全选、反选、过滤disabled
- javascript针对cookie的基本操作实例详解
- JavaScript中事件处理
- js显示当前系统时间+星期几
- 在JS中获取页面提交参数
- js调用手机摄像头
- javascript闭包(Closure)用法实例简析
- 浏览器JS脚本
- 详解JavaScript的流程控制语句
- java & javascript 自定义加密数据传输
- java & javascript 自定义加密数据传输
- JS日期时间增加减少
- 详解JavaScript的表达式与运算符