【问题标题】:HTML 5 - Play tiny mp3 "inline"HTML5 - “在线”播放微型 mp3
【发布时间】:2012-02-01 00:04:40
【问题描述】:

我想使用 HTML 5 音频支持播放 mp3。 我试图使用音频标签,但现在我正在使用 javascript。

我的“播放器”将只是一个很小的播放图像,当按下它时播放音频(不是所有带有进度的音频控件)。

我正在尝试使用 javascript 播放它。

function playmp3(url){
   var audioElement = document.createElement('audio');
   audioElement.setAttribute('src', url);
   audioElement.load();
   audioElement.play();
}

这是我的代码,它不起作用。当我单击作为我的播放按钮的图像时,它执行正常。

Url 是一个包含文件 url 的字符串。

我正在测试最新版本的 Chrome 和 FF。

【问题讨论】:

  • 您想播放视频,但它是 mp3 并且您正在使用音频标签?我很困惑。
  • 您是说您看到了错误的控件吗?你的音频标签是什么样的?你能发布一些代码示例吗?
  • 您的浏览器支持mp3吗?
  • @berry120 这是一个错误,已修复。没有视频标签。我只想播放音频。
  • @Seth 我删除了音频标签,我正在尝试从 javascript 做所有事情

标签: html audio mp3 playback


【解决方案1】:

在尝试播放 mp3 之前尝试侦听 canplay 事件。以下是如何做到这一点的示例:

function playmp3(url){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', url);
    audioElement.load();
    audioElement.addEventListener("canplay", function() {
        audioElement.play();
    });
}

canplay 事件在浏览器可以开始播放 mp3 时触发,但不保证它可以完整播放 mp3。如果这不符合您的目的,您可以收听一些其他相关事件,例如loadeddatacanplaythrough

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-21
    • 2012-04-01
    • 2013-03-24
    • 1970-01-01
    • 1970-01-01
    • 2012-10-31
    相关资源
    最近更新 更多