HTML 5 - 玩小小的MP3＆QUOT;内联＆QUOT; [英] HTML 5 - Play tiny mp3 "inline"

问题描述

我要玩使用HTML 5音频支持一个MP3。
我试图使用音频标签，但我现在使用JavaScript这样做。

I want to play a mp3 using HTML 5 audio support. I was trying to use an audio tag but now I am doing it using javascript.

我的玩家将只是一个小小的播放的图像，当是pressed播放音频（不是所有的音频控制与进度）。

My "Player" will be just a tiny Play image, that when is pressed plays the audio (not all the audio control with progress).

我想用JavaScript来播放它。

I am trying to play it using javascript .

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

这是我的code和它不工作。当我点击的形象是我的播放按钮，它执行ok了。

This is my code and it does not work. It executes ok when I click an image that is my Play button.

链接包含文件的URL字符串。

Url is a string that contains the url of a file.

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

I am testing in the newest versions of Chrome and FF.

推荐答案

试图侦听的 canplay 尝试播放MP3之前事件。下面是如何做到这一点的例子：

Trying listening for the canplay event before attempting to play the mp3. Here's an example of how to do that:

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

的 canplay 事件被触发时，浏览器就可以开始播放MP3，但并不保证它可以播放MP3完成。如果不适合你的目的，也有一些其他的相关事件，你可以听如的 loadeddata 和的 canplaythrough 。

The canplay event is fired when the browser can start playing the mp3, but it doesn't guarantee that it can play the mp3 to completion. If that doesn't suite your purposes, there are a couple of other related events that you can listen to such as loadeddata and canplaythrough.

这篇关于HTML 5 - 玩小小的MP3＆QUOT;内联＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！