使用SoundManager 2创建简单的音频播放器

HTML5中引入的两个非常有用的功能是audio和video元素，它们允许在浏览器中本地播放音频和视频。 在进行此项创新之前，想要在其网站上提供视频或音频的人们必须依赖于Flash等第三方软件。

对我们来说幸运的是， audio和video至少部分地解决了这个问题。 我说的部分原因有两个。 首先，并不是所有要求开发人员支持的浏览器都实现了这些元素，例如某些旧的移动浏览器和旧版本的Internet Explorer。 第二个原因是浏览器尚未就实现的格式达成共识，因此今天我们有支持不同格式的不同浏览器。 发生这种情况的原因是“政治”原因，而不是技术原因，但是无论原因如何，我们都必须面对这两个问题。

考虑到这一点，如果您想在网站中使用这两个元素中的任何一个，不仅必须为要播放的每种音频或视频提供不同的格式，而且还需要为不支持audio浏览器提供后备audio和video 。 为了实现此目标，您可以使用本机方法，然后安装一个库，该库为您提供具有自己的功能和API的基于Flash的播放器，或者您可以使用公开相同API并提供以下功能的多合一库本机解决方案或基于Flash的解决方案，具体取决于浏览器的功能。

在本文中，我们将讨论一个称为SoundManager 2的多合一库，以研究第二种方法。

什么是SoundManager 2？

如SoundManager 2网站上所述 ，此库在单个JavaScript API下提供了简单，可靠的跨平台音频。 SoundManager 2与数量众多的浏览器兼容，我敢肯定所有您必须支持的浏览器。 为了让您有个好主意，以下是经过测试的浏览器和平台的列表：

• Firefox（所有版本），Windows / Mac
• Safari 1.3+（Mac）/所有Windows版本
• 移动Webkit：iOS 4.0设备，iPad 3.2（原始iPad iOS版本）及更高版本
• Android（2.3以上版本，已在2.3.3。确认）。
• Google Chrome（所有版本/操作系统）
• Internet Explorer 5.0 +，Windows
• Opera 9.10（略有故障，9.5 +理想），Windows / Mac
• Netscape 8.0 +，Windows / Mac
• Firefox 1.5以上版本，Linux（Flash 9 beta）。

你相信吗？ 甚至支持Internet Explorer 5！

SoundManager 2封装并扩展了HTML音频和Flash音频API，为JavaScript提供了一个统一的声音API。 无论引擎盖下运行哪种技术来播放声音，API都是一致的。

现在您已经知道了这个库是什么以及为什么要使用它，而不是列出可用的方法和属性，我想指导您创建一个使用SoundManager 2开发的小项目。

使用SoundManager 2创建简单的音频播放器

在本节中，我们将在SoundManager 2的支持下使用HTML，CSS和JavaScript开发一个简单而功能强大的音频播放器。为了使事情尽可能简单，我们的播放器将允许用户播放给定的音频文件。将所有硬代码写入源代码。 您可以轻松地修改源，以允许用户使用选择菜单来选择他们想要播放的音频。

事不宜迟，让我们开始编写为播放器提供动力的标记。

标记

我们的播放器使用户能够：

• 播放和停止音频文件
• 暂停并恢复音频文件
• 调高音量
• 来回移动音频文件的当前位置30秒
• 知道文件音频的持续时间以及自开始以来经过的时间
• 知道当前的音量。

根据此列表，您可以看到我们需要六个按钮：播放/暂停/继续，停止，提高音量，降低音量，后退和前进。 第一个按钮“播放”根据音频文件的状态执行各种任务。 如果正在播放音频文件，则该按钮允许用户暂停音频。 如果音频文件已暂停，则该按钮允许恢复音频； 如果音频文件已停止或尚未播放，则该按钮允许从头开始播放音频。 每个按钮都将与一个图标相关联，以便我们理想的用户获得愉快的体验。

除了按钮之外，我们还需要三个元素来显示经过的时间，音频文件的总持续时间以及播放器的音量（已初始化为100）。

这些要求的可能实现如下所示：

<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>

如您所见，我已经使用BEM表示法来命名用于标记元素样式的类。 你们中的有些人可能会争辩说，对于这样一个简单的例子，这太过分了。 尽管这确实是对的，但我坚信良好的习惯是从使用带有简单示例的技术或方法开始，然后在它们之上建立。 我的观点是，从一个复杂的项目开始对于刚开始学习的人来说并不理想。 这解释了为什么我在本项目中使用了它。

除了BEM表示法之外，您可能还观察到我使用了button元素来标记按钮。 这似乎很明显，但事实并非如此。 许多开发人员，在这种情况下，会使用a元素或span S; 但a要素应该引导用户去某个地方，而button是当一个元素应该做些什么来使用的元素。 而我们的玩家需要做一些事情。

现在我们有了标记，让我们对其进行样式设置。

添加一点风格

我将使该项目的样式保持简单。 播放器将具有灰色背景和黑色边框以突出显示其边界。 我还将“重置” button的默认样式，以使它们看起来不像典型的按钮，而是显示相关的图标。 最后，要从“播放”按钮切换到“暂停”按钮，我将创建一个is-playing类，该类通过更改显示的图标清楚地标记音频文件的状态。

我们的播放器的完整样式如下所示：

.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");
}

发展行为

我们终于到达了项目的核心，即业务逻辑。 如您所见，它并不是很复杂，但是为了拥有更多可维护的代码，我们将创建一个名为formatMilliseconds的支持函数和一个名为player的对象。 顾名思义，该函数用于将给定的毫秒数转换为字符串。 更具体地说，该字符串将被格式化为“ H：MM：SS：mmm”，因为我们将使用它来显示音频文件的总持续时间和经过的时间。 player对象将用于存储播放器的元素，这样我们就不必每次都检索它们。 这使我们可以改善项目的性能。 最后，我们将使用audio变量来存储使用SoundManager 2创建的代表音频文件的对象实例。

我们刚刚描述的函数和变量如下所示：

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;

此时，我们必须创建一个代表音频文件的新对象，这意味着我们必须为audio变量分配一个值。 我们将使用库提供的createSound()方法来完成此操作。 它允许我们定义几个属性，但最重要的是id和url ，后者为音频文件分配一个标识符，在url中您可以为音频文件设置URL。

该对象的创建是在匿名函数内部执行的，该匿名函数在引发库的ready事件时执行，这意味着该库已执行所有操作并准备使用。 我们可以通过将对象文字传递给setup()方法来指定触发ready事件时的处理方式以及其他设置。

您还应在此处指向SoundManager 2的基于Flash的播放器，以用作备用。 它在下面的代码中设置：

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 does not like this statement
               event = new Event('click');
            } catch (ex) {
               event = document.createEvent('MouseEvent');
               event.initEvent('click', true, false);
            }
            player.btnStop.dispatchEvent(event);
         }
      });
   }
});

实例化代表音频文件的对象后，我们必须向播放器的每个按钮添加一个事件侦听器。 这是我们的player对象发挥作用的地方。 使用它，我们可以引用播放器的按钮和其他元素，而无需每次都执行新的选择。 这也是SoundManager 2库在其中显示其易用性的地方。例如，假设您要播放音频：您认为该库公开了什么方法？ play() ，当然！ 如果我们想停止音频怎么办？ 为此，我们有stop() 。 现在，如果我们想知道音频文件是否已暂停怎么办？ 该库提供了一个称为paused的布尔属性。 对于总持续时间，我们有一个duration属性。 很简单，不是吗？

要更改音量并移动音频的当前位置，我们有两种方法： setVolume()和setPosition() 。 它们每个都接受一个数字，该数字将更新您要更改的值。 例如，如果要将音量设置为50（比例范围为0到100），则可以编写：

audio.setVolume(50);

如果要将位置从开始位置移至10秒，可以编写：

audio.setPosition(10000);

因为该方法接受毫秒，所以提供的值为10000。

下面介绍实现我们描述的功能的代码的其余部分：

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 does not 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);   
   }
});

结果

我们已经完成了任务，但是在看到播放器运行之前，我们必须包括SoundManager 2库。 您可以通过从SoundManager 2网站或CDN下载该库及其所有文件来实现。

请记住，为了使基于Flash的播放器作为备用，您必须包括SoundManager 2库随附的SWF文件。 完成此操作后，您就可以观看播放器直播了。

下面的JSFiddle中显示了我们项目的结果：

结论

在本教程中，我描述了SoundManager 2 –一个允许您使用一组独特的API来处理支持audio元素及其API以及不支持audio元素的浏览器的库。 如您所见，SoundManager 2支持数量众多的浏览器（包括Internet Explorer 5！），因此您可以在项目中可靠地使用它。

我们通过创建一个简单的播放器来执行一些SoundManager 2的方法，该播放器可以执行一些基本任务，例如播放和暂停音频文件，修改音量以及来回移动音频。 如果您想了解有关SoundManager 2的更多信息，建议您阅读其广泛的文档 。 希望您喜欢图书馆和演示，并希望与我们分享您的意见。

From: https://www.sitepoint.com/creating-audio-player-soundmanager/