Soundmanager 2 的皮肤/主题 [关闭]答案

【问题标题】：Skins / Themes for Soundmanager 2 [closed]Soundmanager 2 的皮肤/主题 [关闭]
【发布时间】：2011-12-21 06:18:07
【问题描述】：

我目前正在考虑将 Soundmanager2 用作小型项目的音频播放器。我非常喜欢 SM2，但不幸的是，我找不到为内联播放器提供基本控件（播放、暂停、进度条、时间、音量控制）的实现。

我唯一找到的是basic player。

有没有人知道如何使用带有经典控制界面的 Soundmanager2 (like this)？

【问题讨论】：

不确定它是否有帮助，但考虑到它已经是 html/css，将您的示例移植到 SoundManager 应该不会太难

标签： javascript html audio soundmanager2

【解决方案1】：

根据 Soundmanager 网站https://getsatisfaction.com/schillmania/topics/track_list_with_controls_prev_next_button 上的讨论

这是内幕：

添加：

pagePlayer.playNext() pagePlayer.playPrevious()

只需使用 HTML/CSS 制作必要的按钮。在这些按钮内部使用 onclick 属性，例如：打开标签：一个 onclick="pagePlayer.playNext()" 关闭标签

不要使用“href”属性。单击时将执行 javascript 方法。

此外，该网站上的人们正在为 soundmanager2 的播放器处理音量。搜索“音量更改声音管理器”。这里有一个人：http://stackoverflow.com/questions/8625500/strange-issue-setting-volume-on-my-music-player-soundmanager

// set base volume
$('header .volume-slider').each(function() {
  var slider = $('.slider', this);
  var volume = slider.data('volume');

  console.log('Initial volume: '+volume);
  $('.slider', this).height(volume/2);
});

// play / pause track
var sound;
$(document).on('click', '#snippets .tracks li', function() {
  var li = $(this);
  console.log('Creating new sound with volume: '+$('header .volume-slider .slider').data('volume'));

  sound = soundManager.createSound({
    id: li.data('id'),
    url: li.data('stream')+'?consumer_key=' + 'htuiRd1JP11Ww0X72T1C3g',
    volume: $('header .volume-slider .slider').data('volume')
  });
});

// change volume
$('header .volume-slider').mouseup(function(e) {
  var pos = e.pageY - $(this).offset().top;
  var slider = $('.slider', this);

  slider.data('volume', (100-(pos*2)));
  var volume = slider.data('volume');

  slider.height(volume/2);

  if (sound) {
    console.log('Setting volume: '+volume);
    sound.setVolume(volume);
  }
});

那么，如果您可以设置 nex/prev 并为其制作一个按钮，您是否可以想出一个音量更改然后为它设置一个条形样式？

【讨论】：

【解决方案2】：

经过一些随意的研究，我发现 Soundmanager 2 过于强大和复杂，无法仅仅创建一个 html5 播放器。我决定改用jMediaelement，这是一个非常灵活的音频/视频开发工具包，专注于具有经典控制界面的网站播放器。

【讨论】：