html - 在没有 Flash 的网页上嵌入高质量的音频文件

Question

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

由于她对质量非常具体，她给了我一个 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 文件!)，要么是基于闪存的......

Answer 1

要使 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”文件夹中: download