在无网页的情况下在网页上嵌入高质量的音频文件

我试图将音频文件嵌入客户端的网站（将音乐作为她的工作）。在无网页的情况下在网页上嵌入高质量的音频文件

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

在其他地方还会有其他玩家（不是自动播放），所以我需要找到一种方法来以同样的外观来做所有这些事情，而且我的理解和安装都很简单（我不是对JS很好）。另外，我需要它在所有设备上工作，而不是闪光灯。

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

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

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

来源

2014-10-18 MicroMachine

会惊人的音频播放器满足您的需求？ http://amazingaudioplayer.com/他们提供了一些简单的定制js，你可以根据你的需要调整css。

我用320kbs的文件成功地使用了它，12分钟长。

来源

2014-10-25 17:06:12 evbvd

这是一个我不知道的很好的工具，非常可定制。谢谢。不过，我发现没有水印的版本价格和播放器上写的“免费版本”有点陡峭（69美元）。也许我会使用免费版本，这个版本对我的HTML5代码来说仍然是一个很大的改进，而且非常容易使用。 – MicroMachine 2014-10-29 15:29:24

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

然后，你必须加载资源，为玩家：

的JavaScript文件检测，可与不同的类名（例如全宽度为全宽plauer）进行定制以前的HTML片段并将其转换为一个球员：酒吧ui.js
CSS文件的样式玩家：酒吧ui.css

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

来源

2014-10-28 11:35:06 Snsxn

在无网页的情况下在网页上嵌入高质量的音频文件

回答

相关问题