1

我正在尝试为客户（以创作音乐作为她的工作）在网站上嵌入音频文件。

由于她对质量非常具体，她给了我一个 20 分钟的 mp3 曲目 @ 320 Kbps（约 50Mb）。理想情况下，当我们到达网站时，该曲目会在网站主页上自动播放，但如果需要，可以控制将其暂停。

其他地方会有其他播放器（虽然不是自动播放），所以我需要找到一种方法以相同的外观完成所有这些操作，以我理解且易于安装的方式（我对 JS 不太擅长） ）。另外，我需要它在所有设备上工作，没有闪光灯。

我首先尝试使用 HTML5 嵌入（使用简单，无闪存），但 HTML5 播放器不会立即开始播放（或“流”），它会在播放前等待 50Mb 文件完全加载，这需要太长。

我也刚刚尝试从SoundManager2安装播放器“BAR-UI / Compact UI single Item” ，它的设计看起来非常好，而且非常理想，但我无法让它工作或找到足够完整的安装播放器教程使用控件，即使尝试了两个小时 - 文件不播放但播放器显示（尽管没有显示歌曲名称），或者歌曲立即在浏览器中播放，但控件不显示。考虑到 SoundManager2 的代码中仅在 CSS 中有 4000 行，很难对 SoundManager2 进行故障排除，而且我发现安装 SoundManager 的 Bar-UI 及其非常混乱的文件的解释很少。 WikiAudio有一个很棒的关于 SoundManager 的页面，但它并没有涉及到安装和显示控件。

我看过的其他选项（jPlayer）要么对于我正在尝试做的事情非常复杂（它只是一个在网站上加载时播放的简单 mp3 文件！），要么是基于闪存的......

4

2 回答 2

2

要使 BAR-UI 在您的网页中工作，您必须插入 HTML 片段。它可以使用不同的类名进行定制（例如 full-width for full-width plauer）：

<div class="sm2-bar-ui compact">
    <div class="bd sm2-main-controls">
        <div class="sm2-inline-texture"></div>
        <div class="sm2-inline-gradient"></div>
        <div class="sm2-inline-element sm2-button-element">
            <div class="sm2-button-bd">
                <a href="#play" class="sm2-inline-button play-pause">Play / pause</a>
            </div>
        </div>
        <div class="sm2-inline-element sm2-inline-status">
            <div class="sm2-playlist">
                <div class="sm2-playlist-target">
                </div>
            </div>
            <div class="sm2-progress">
                <div class="sm2-row">
                    <div class="sm2-inline-time">0:00</div>
                    <div class="sm2-progress-bd">
                        <div class="sm2-progress-track">
                            <div class="sm2-progress-bar"></div>
                            <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
                        </div>
                    </div>
                    <div class="sm2-inline-duration">0:00</div>
                </div>
            </div>
        </div>
        <div class="sm2-inline-element sm2-button-element sm2-volume">
            <div class="sm2-button-bd">
                <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
                <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
            </div>
        </div>
    </div>
    <div class="bd sm2-playlist-drawer sm2-element">
        <div class="sm2-inline-texture">
            <div class="sm2-box-shadow"></div>
        </div>
        <div class="sm2-playlist-wrapper">
            <ul class="sm2-playlist-bd">
                <li><a href="http://freshly-ground.com/data/audio/sm2/SonReal%20-%20I%20Tried.mp3"><b>SonReal</b> - I Tried</a></li>
            </ul>
        </div>
    </div>
</div>

然后你必须为播放器加载资源：

  • 检测前一个 HTML 片段并将其转换为播放器的 JavaScript 文件：bar-ui.js
  • 用于设置播放器样式的 CSS 文件：bar-ui.css

所有这些文件都在可下载的 SoundManager 2 的“demo”文件夹中：下载

于 2014-10-28T11:35:06.853 回答
0

Amazing Audio Player 会满足您的需求吗？http://amazingaudioplayer.com/他们为 js 提供了一些简单的自定义，您可以根据需要微调 css。

我已经成功地使用了 320kbs 文件，12 分钟。

于 2014-10-25T17:06:12.257 回答