如何构建我自己的嵌入式音频播放器//不是纯 Flash [关闭]

Posted 2023-02-25

【中文标题】如何构建我自己的嵌入式音频播放器//不是纯 Flash [关闭]

【英文标题】：How to build my own embeddable audio player // not pure flash [closed]

【发布时间】：2011-06-24 18:47:37

【问题描述】：

我们目前正在开发一个基于用户生成的音频内容的社区。播放音频将是 Soundmanager 2 的基础技术是 html5。我们基于 SM2 选项 jQuery 创建了自己的播放器界面。

为了使上传的 mp3 文件可嵌入，我目前正在寻找合适的技术。该播放器必须可以在移动设备上播放（我假设不包括纯 Flash 播放器）。流量泄漏应该是可以避免的。

在跨浏览器（和跨设备）兼容性和安全性方面，创建可嵌入播放器 sn-p 的最佳方法是什么？

恕我直言，这些是选项：

嵌入<iframe> 标签（如 Facebook 优惠） 嵌入<script> 标签（将播放器代码“注入”到 DOM 中）。 只需提供一个缩短的 HTML 标记 sn-p，所有链接都设为绝对链接（CSS、JS、 图片）

编辑：为了避免误读：我说的是可以提供给我们的访问者的嵌入代码，以便他们可以在他们的上使用我们的播放器/em> 远程网站。是的，比如 Youtube 或 Soundcloud。

【参考方案1】：

我没用过 SM2，所以不能说。

但是，如果 jQuery 是一个选项，我很幸运使用了基于 jPlayer 的 jquery.mb.miniAudioPlayer。

这是所需的最少标记/代码的示例：

<script type="text/javascript" src="inc/jquery/1.3.2.min.js"></script>
<script type="text/javascript" src="inc/mbScrollable.js"></script>
<script type="text/javascript">
    $(function()
       $(".audio").mb_miniAudioPlayer(
        width:240,
        inLine:false
      );
    );
</script>

<div id="myScroll">
    <a id="m1" 
        class="audio ogg:'http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg',
        mp3:'http://www.miaowmusic.com/ogg/Miaow-07-Bubble.mp3'"
        href="javascript:void(0)">miaowmusic - Bubble (mp3/ogg)
    </a>
</div>

（如在this page 上看到的那样——点击“如何”。）

或者换句话说，使用您的细分：是的，有一个 <script> 标签将播放器代码“注入”到 DOM 中。

【讨论】：

jQuery 始终是一个选项！ （如果不是答案）

@Trufa - 是的，我认为在 SO 上推荐 jQuery 永远不会出错……

不，你不能 :) 顺便说一句，这是个好东西！

是的，jQuery 是一个选项。在您的示例中，必须将 标签放在文档标题中。如果我将整个文件包装成一个 作为文档正文，它还能工作吗？请记住，它必须在远程网站（博客等）上工作，而不仅仅是在我们的网站上。

@Mateng - 我没试过，所以我不能肯定——但我怀疑它会很好用。