HTML 5 - Reproducir un pequeño mp3 "en línea"

Question

Quiero reproducir un mp3 con soporte de audio HTML 5. Estaba tratando de usar una etiqueta de audio, pero ahora lo hago usando javascript.

Mi "Reproductor" será solo una pequeña imagen Reproducir, que cuando se presiona reproduce el audio (no todo el control de audio con progreso).

Estoy tratando de jugar usando javascript.

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

Este es mi código y no funciona. Se ejecuta bien cuando hago clic en una imagen que es mi botón Reproducir.

Url es una cadena que contiene la url de un archivo.

Estoy probando en las versiones más recientes de Chrome y FF.

Answer 1

Intentando escuchar el evento canplay antes de intentar reproducir el mp3. Aquí está un ejemplo de cómo hacerlo:

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

El evento canplay se activa cuando el navegador puede iniciar la reproducción del mp3, pero no garantiza que pueda jugar el mp3 a su finalización. Si eso no se ajusta a sus propósitos, hay un par de otros eventos relacionados que puede escuchar, como loadeddata y canplaythrough.