使用javascript播放mp3文件

发布于 2025-01-05 23:12:39 字数 322 浏览 1 评论 0原文

通过 javascript 播放 mp3（非常短）文件的最佳跨浏览器方式是什么？我尝试了不同的方法，但总是有一个问题...

编辑1：

我不需要一个“完整”的播放器，我只需要一个每次发生事情时都可以调用的函数

编辑2 ：

好吧，我必须更好地解释我的问题。服务器是连接到 LAN 中的智能手机，但并不总是连接到互联网。我想使用 mp3，因为该文件仅重 3kb（而不是 60kb 的 wav），但如果播放该文件的机制太“重”（播放器或 jquery.js），我认为最好使用 wav 文件。其他建议？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遮了一弯 2025-01-12 23:12:39

使用这个：

new Audio('your/url/here').play()

这个的文档（HTMLAudioElement ）可以在 MDN 上找到，注意大多数控件都是由 HTMLMediaElement。

Use this:

new Audio('your/url/here').play()

The documentation for the this (HTMLAudioElement) can be found at MDN, note that most of the controls are inherited by HTMLMediaElement.

回复收藏 0 原文

看海 2025-01-12 23:12:39

只需直接下载音频文件即可加载页面。检测浏览器是否支持 MP3。如果是这样，请逐步增强对 AUDIO 标签的直接下载。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Audio demo</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
</head>
<body>
    <p id="audio">
        <a href="BadAppleEnglish.mp3">Listen »</a>        
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script src="audio.js"></script>
</body>
</html>

Javascript：

$(function () {
var audioElement = $('#audio'),
    href = audioElement.children('a').attr('href');
$.template('audioTemplate', '<audio src="${src}" controls>');
if (Modernizr.audio.mp3) {
    audioElement.empty();
    $.tmpl('audioTemplate', {src: href}).appendTo(audioElement);
}
});

我想大多数预建的 MP3 播放插件都是这样工作的。

更新：

由于您已经编辑了问题以指定您更喜欢不使用 jQuery 的解决方案，因此我将指出，重写此问题以不使用 jQuery 是微不足道的。它只是更长而且不太优雅。请记住，从 CDN 加载的 Javascript 库通常由浏览器缓存。

Load the page with just a direct download to the audio file. Detect if the browser supports MP3s. If it does, progressively enhance the direct download into an AUDIO tag. Here's a sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Audio demo</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
</head>
<body>
    <p id="audio">
        <a href="BadAppleEnglish.mp3">Listen »</a>        
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script src="audio.js"></script>
</body>
</html>

And the Javascript:

$(function () {
var audioElement = $('#audio'),
    href = audioElement.children('a').attr('href');
$.template('audioTemplate', '<audio src="${src}" controls>');
if (Modernizr.audio.mp3) {
    audioElement.empty();
    $.tmpl('audioTemplate', {src: href}).appendTo(audioElement);
}
});

I would imagine that most of the zillions of prebuilt MP3 playing plugins work like this.

UPDATE:

Since you've edited the question to specify that you'd prefer a solution that doesn't use jQuery, I will point out that rewriting this to not use jQuery is trivial. It's just longer and less elegant. Do keep in mind that Javascript libraries loaded from CDNs are usually cached by the browser.

回复收藏 0 原文

没企图 2025-01-12 23:12:39

尝试使用我自己的脚本，

<script src="https://webtinq.nl/ap/script.js></script>

当链接该脚本时，您唯一需要做的就是

play('example');

try using my own script,

<script src="https://webtinq.nl/ap/script.js></script>

and when that script is linked, the only thing you need to do is

play('example');

回复收藏 0 原文

~没有更多了~

关于作者

雨落□心尘

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

使用javascript播放mp3文件

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

微信用户

小情绪

追我者格杀勿论

ゞ记忆︶ㄣ

笨死的猪

彭明超

友情链接

使用javascript播放mp3文件

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

微信用户

小情绪

追我者格杀勿论

ゞ记忆︶ㄣ

笨死的猪

彭明超

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。