Question

我正在尝试将网络上的音频文件嵌入到客户端（将音乐作为她的工作）。

由于她非常讲究质量，她给了我一个20分钟的mp3轨道@ 320 Kbps（约50Mb）。当我们到达网站时，此轨道最好在网站的主页上自动播放，但如果需要，可以控制暂停。

在其他地方会有其他玩家（不是在自动播放上），所以我需要找到一种方法，以我理解的方式以相同的外观完成所有这些，并且安装简单（我不是这样）很好的JS）。此外，我需要它在所有设备上工作，没有闪光灯。

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

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

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

Answer 1

要使BAR-UI在您的网页中正常工作，您必须插入HTML片段。它可以使用不同的类名进行自定义（例如全宽度的全宽度）：

<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

Answer 2

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

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

在没有闪存的网页上嵌入高质量的音频文件

2 个答案: