官网:http://www.schillmania.com/projects/soundmanager2/
HTML5 标准中加入了两个非常强大的标签 audio
和 video
,让我们在网页中嵌入视频和音频变得非常方便,但是不幸的是目前用户所使用的有很大一部分浏览器都是老版本的,并不支持这两个标签,这使前端开发者们很困扰,这里介绍一款相对来讲支持浏览器比较多的网页音频播放器 ------ SoundManager 2。
以下是 SoundManager 2 支持的浏览器版本,你没看错,它甚至支持 IE5:
- Firefox (all versions), Windows/Mac
- Safari 1.3+ (Mac) / All Windows versions
- Mobile Webkit: iOS 4.0 devices, iPad 3.2 (original iPad iOS release) and newer
- Android (2.3+, confirmed on 2.3.3.)
- Google Chrome (all versions/OSes)
- Internet Explorer 5.0+, Windows
- Opera 9.10 (slightly buggy, 9.5+ ideal), Windows/Mac
- Netscape 8.0+, Windows/Mac
- Firefox 1.5+, Linux (Flash 9 beta).
创建一个简单的音频播放器
下面将演示如何创建一个简单的音频播放器:
播放器功能
- 播放和暂停
- 取消和重新播放
- 加大/减小声音
- 快进/快退 30 秒
- 显示播放进度
- 显示当前音量
根据上面的列表,我们需要 6 个按钮,所以我们现在 HTML 中生成 6 个按钮控件。
<div class="player"> <div class="player__audio-info"> <div> Played <span class="player__time-elapsed">-</span> of <span class="player__time-total">-</span> <button class="player__previous button button--small">Move back</button> <button class="player__next button button--small">Move forth</button> </div> <div> Volume: <span class="player__volume-info">100</span> <button class="player__volume-down button button--small">Volume down</button> <button class="player__volume-up button button--small">Volume up</button> </div> </div> <button class="player__play button button--large">Play</button> <button class="player__stop button button--large">Stop</button> </div>
添加一些样式
.player { display: inline-block; width: 300px; padding: 5px; background-color: #E3E3E3; border: 1px solid #000000; } .player span { font-weight: bold; } .button { text-indent: 200%; white-space: nowrap; overflow: hidden; border: none; padding: 0; background: rgba(255,255,255,0); cursor: pointer; vertical-align: bottom; } .button--small { width: 19px; height: 19px; } .button--large { width: 48px; height: 48px; } .player__audio-info { padding-bottom: 5px; border-bottom: 1px dotted #000000; } .player__audio-info div + div { margin-top: 10px; } .player__volume-info { display: inline-block; width: 1.5em; } .player__play { background-image: url("http://i60.tinypic.com/14mbep2.png"); } .player__play.is-playing { background-image: url("http://i57.tinypic.com/idyhd2.png"); } .player__stop { background-image: url("http://i61.tinypic.com/35mehdz.png"); } .player__previous { background-image: url("http://i60.tinypic.com/sdihc5.png"); } .player__next { background-image: url("http://i57.tinypic.com/2s1nm77.png"); } .player__volume-down { background-image: url("http://i60.tinypic.com/331nom0.png"); } .player__volume-up { background-image: url("http://i60.tinypic.com/ekkc1t.png"); }
添加操作的 JavaScript 代码:
function formatMilliseconds(milliseconds) { var hours = Math.floor(milliseconds / 3600000); milliseconds = milliseconds % 3600000; var minutes = Math.floor(milliseconds / 60000); milliseconds = milliseconds % 60000; var seconds = Math.floor(milliseconds / 1000); milliseconds = Math.floor(milliseconds % 1000); return (hours > 0 ? hours : '0') + ':' + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds + ':' + (milliseconds < 100 ? '0' : '') + (milliseconds < 10 ? '0' : '') + milliseconds; } var player = { btnPlay: document.querySelector('.player__play'), btnStop: document.querySelector('.player__stop'), btnPrevious: document.querySelector('.player__previous'), btnNext: document.querySelector('.player__next'), btnVolumeDown: document.querySelector('.player__volume-down'), btnVolumeUp: document.querySelector('.player__volume-up'), timeElapsed: document.querySelector('.player__time-elapsed'), timeTotal: document.querySelector('.player__time-total'), volume: document.querySelector('.player__volume-info') }; var audio = null; soundManager.setup({ useFastPolling: true, useHighPerformance: true, onready: function() { audio = soundManager.createSound({ id: 'audio', url: 'http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3', whileloading: function() { player.timeTotal.textContent = formatMilliseconds(audio.durationEstimate); }, whileplaying: function() { player.timeElapsed.textContent = formatMilliseconds(audio.position); }, onload: function() { player.timeTotal.textContent = formatMilliseconds(audio.duration); }, onfinish: function() { var event; try { // Internet Explorer doesn't like this statement event = new Event('click'); } catch (ex) { event = document.createEvent('MouseEvent'); event.initEvent('click', true, false); } player.btnStop.dispatchEvent(event); } }); } }); player.btnPlay.addEventListener('click', function() { if (audio === null) { return; } if (audio.playState === 0 || audio.paused === true) { audio.play(); this.classList.add('is-playing'); } else { audio.pause(); this.classList.remove('is-playing'); } }); player.btnStop.addEventListener('click', function() { if (audio === null) { return; } audio.stop(); document.querySelector('.player__time-elapsed').textContent = formatMilliseconds(0); player.btnPlay.classList.remove('is-playing'); }); player.btnVolumeDown.addEventListener('click', function() { if (audio === null) { return; } var volume = audio.volume - 10 < 0 ? 0 : audio.volume - 10; audio.setVolume(volume); player.volume.textContent = volume; }); player.btnVolumeUp.addEventListener('click', function() { if (audio === null) { return; } var volume = audio.volume + 10 > 100 ? 100 : audio.volume + 10; audio.setVolume(volume); player.volume.textContent = volume; }); player.btnPrevious.addEventListener('click', function() { if (audio === null) { return; } var position = audio.position - 30000 < 0 ? 0 : audio.position - 30000; audio.setPosition(position); player.timeElapsed.textContent = formatMilliseconds(audio.position); }); player.btnNext.addEventListener('click', function() { if (audio === null) { return; } var position = audio.position + 30000 > audio.duration ? audio.duration : audio.position + 30000; if (position === audio.duration) { var event; try { // Internet Explorer doesn't like this statement event = new Event('click'); } catch (ex) { event = document.createEvent('MouseEvent'); event.initEvent('click', true, false); } player.btnStop.dispatchEvent(event); } else { audio.setPosition(position); player.timeElapsed.textContent = formatMilliseconds(audio.position); } });
原文:http://segmentfault.com/a/1190000002602613
[实例] 使用JS播放声音——SoundManager 2
官方文档写得很详细,好东西
写个Demo
需要的文件有:下载soundmanager2包中的script文件夹和swf文件夹
Demo/ - index.html Demo/script/ - jquery-1.8.2.min.js - soundmanager2-nodebug-jsmin.js Demo/swf/ - soundmanager2_flash_xdomain.zip - soundmanager2_flash9_debug.swf - soundmanager2_flash9.swf - soundmanager2_debug.swf - soundmanager2.swf Demo/sound/ - msg.mp3
index.html
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>SoundDemo</title> <script type="text/javascript" src="script/soundmanager2-nodebug-jsmin.js"></script> <script type="text/javascript" src="script/jquery-1.10.0.min.js"></script> <script type="text/javascript"> soundManager.setup({ url: 'swf/', //swf文件夹的位置 onready: function() { soundManager.createSound({ id: 'msg', autoLoad: true, autoPlay: false, url: 'sound/msg.mp3' //mp3文件的位置 }); } }); $(document).ready(function () { $('#play').click(function () { soundManager.play('msg'); //点击按钮可播放 }); }); </script> </head> <body> <input type='button' id='play' value='Play' /> </body> </html>
遇到的问题
- 需要把Demo部署到服务器上才能正常, 否则还是会有?跨域的问题?(应该是这个问题吧), 不能加载本地文件. (意思是: 本地直接打开index.html是不能播放的, 但我上传到博客的服务器上就能播放了..有人不理解这个 - - 搜索"跨域"相关)
- 用的.wav文件在chrome中能正常播放, 但在IE中不能播放, 转成.mp3文件后就都可以正常播放了
将代码添加到我自己写的IM里成功播放声音
参考文档:
原文:http://zoeyyoung.github.io/sound-manager-2-web-im.html
SoundManager属性
soundManager对象有许多可配置的属性,确定Flash的路径和其他行为。下面是SoundManager 2默认的属性,这适合大多数场合,一般情况下你不需要更改它们。
soundManager.url = “/path/to/swf-files/ ” ;
//SM2可以找到Flash影片(soundmanager2.swf,soundmanager2_flash9.swf和调试版本等)的路径。注意:如果没有设置,SM2将追加正确的SWF文件名,对flashVersion和debugMode设置。
soundManager.allowScriptAccess = “always “;
//运行SWF(对象/嵌入属性)方式 可选:”always” or “sameDomain”
soundManager.audioFormats = { … };
//定义支持哪种音频类型(默认情况下为MP3。)
soundManager.bgColor =” #FFFFFF “;
// 背景颜色。
soundManager.consoleOnly = true ;
//如果控制台正在使用,不创建或写入#soundmanager-debug
soundManager.debugMode = true ;
//是否启用调试模式
soundManager.debugFlash = false ;
//是否启用调试里面的SWF输出,解决闪存/浏览器的问题
soundManager.flashVersion = 8 ;
//flash版本(8或9)。一些API功能要求9。
soundManager.flashPollingInterval = null ;
//毫秒,影响加载回调函数频率。如果为null,则使用默认50毫秒。
soundManager.html5PollingInterval = null casino online ;
//毫秒,影响加载回调函数频率。如果为null,运行本地的HTML5更新事件。
soundManager.html5Test = /^(probably|maybe)$/i jameshallison casino ;
//测试HTML5的音频格式。也可用/^probably$/i
soundManager.flashLoadTimeout = 1000 ;
//毫秒 等待Flash视频加载的时间(0 =无穷) 超时显示加载失败
soundManager.noSWFCache = false ;
//如果为TURE,在缓存文件上追加?ts={date}以释放缓存
soundManager.preferFlash = true ;
//是否用到useHTML5audio。目前,如果为 ture并且flash支持的话,将使用MP3/MP4 flash,因为HTML5音频在浏览器中显示有问题。
soundManager.useConsole = true ;
//如果console.log()可用,则使用(否则,写入#soundmanager-debug 元素)
soundManager.useFlashBlock = false ;
//需要flashblock.css,看演示效果时,是否用到flash blockers 。
soundManager.useHighPerformance =false ;
//增强flash显示效果
soundManager.useHTML5Audio = ture ;
//如果API支持,则使用HTML5 Audio() (大多数Safari浏览器,浏览器版本),火狐(没有MP3/MP4)。
soundManager.waitForWindowLoad = false ;
//window.onload()执行完后,才运行soundManager.onload
soundManager.wmode = NULL ;
//flash渲染模式 – 可为:null, “transparent”, or “opaque” (最后两个允许使用z-index)
相关推荐
“SoundManager 2”或“SoundJS”之上的 jQuery 插件,用于实现自定义音频播放器。 默认选项 请参阅请参阅 DEFAULTS: { /** * Driver * * @type {String} 'soundmanager'|'soundjs' */ driver : '' , /** ...
soundcloud-soundmanager-player 使用 SoundManager2 处理音频的自定义事件 SoundCloud 播放器。 与 HTML/CSS 完全分离,只处理音频/播放列表/曲目,但具有易于挂钩的事件。 还包括一个与 HTML 松散耦合的波形模块。...
把绑定写死到里面的soundManager2移出来由开发者自行调用 特色功能介绍 音乐延迟加载 在swaggplayer中,会一开始就自动加载完毕所有的音乐。这样对带宽来说是一个很大的浪费。 在本工具里面,是在播放当前音乐到一半...
NULL 博文链接:https://wangpj.iteye.com/blog/2054334
流星SoundManager2 为打包的 。安装$ meteor add wenape:soundmanager用法看
soundmanager2-nodebug-jsmin.js,在页面引入该js后,首先声明一个soundManager对象,在需要的地方调soundManager.play('声明音频id'),即可播放音频文件
SoundManager,web 播放声音,兼容各浏览器
音频播放器HTML5 音频播放器
jar包,官方版本,自测可用
SoundManager, 在Mac和iPhone上,播放音频的简单声音和音乐播放器类 命令行目SoundManager是在iOS或者Mac应用程序中播放声音和音乐的简单类。支持的操作系统&版本支持 build/Mac 8.0操作系统 10.8 ( Xcode 6.0,苹果...
#cashmusic.js cashmusic.js是一个轻量级的库,可以处理CASH音乐的嵌入,进行一些基本的视频灯箱包装,并提供一个简单的音频接口(通过SoundManager2。)还引入了使页面的所有元素与音频进度动画化的功能。根本没有...
jar包,官方版本,自测可用
简单音频播放器Simple-Audio-Player 是一个轻量级的 JavaScript 库,它被实现为一个 jQuery 插件并基于 flash 和 soundmanager2。依赖关系声音管理器2 jQuery 字体真棒安装 bower install Simple-Audio-Player用法 &...
前端项目-soundmanager2,一个支持MP3、MPEG4和HTML5音频 RTMP的javascript声音API,提供可靠的跨浏览器/平台音频控制,最小12 KB。
前端项目-angular-soundmanager2,SoundManager2 Music Player for AngularJs
演示播放器需要jQuery 1.5,但是如果只需要使用mumbl.js,则不需要jQuery。 请注意,mumbl不是演示中的播放器。 mumbl是后端,而演示只是使用mumbl的一个示例。 含糊的网站示例 支持平台 HTML5 <audio /> ...
本人经过今天研究开发的基于sqlserver2000的,定时刷新读取数据库,如果有新的报警,提示音。
var sound=soundManager.createSound({ id: 'sound_id'+count, url: musArray[count], autoPlay:false }); sound.play({ onfinish: function() { //先停止上一次声音 sound.stop(); //销毁声音 ...
使用SoundManager,您可以控制一个或多个声卡的多个声道。 它使用ALSA与声卡说话。 如何使用SoundManager的示例是商店或商店中有多个房间,每个房间都应有自己的扬声器。 然后使用SoundManager,您将拥有一个Web界面...
播放,循环使用数据源或音频缓冲区创建的曲目 停止曲目,所有声音或组中的曲目 跟踪平移和增益 声音播放完毕时发出信号 播放多首曲目时的平均音量 样本 MultipleSounds:鼠标按下时播放循环声音,按键时播放其他声音...