0

Tengo un pequeño problema de diseño y ejecución del reproductor de audio. Mayormente la codificación se realizó para Firefox, pero en Chrome no se reproduce, tampoco el diseño, el cual se pierde.

Código

var audio = new Audio();
audio.src = 'audio.mp3';
audio.controls = true;
audio.loop = false;
audio.autoplay = true;

var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
window.addEventListener("load", initMp3Player, false);

function initMp3Player() {
  document.getElementById('audio_box').appendChild(audio);
  context = new AudioContext();
  analyser = context.createAnalyser();
  canvas = document.getElementById('analyser_render');
  ctx = canvas.getContext('2d');

  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
  frameLooper();
}

function frameLooper() {
  window.requestAnimationFrame(frameLooper);
  fbc_array = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(fbc_array);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#FFF';
  bars = 100;
  for (var i = 0; i < bars; i++) {
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 5);

    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  }
}
* {
  margin: 0;
  padding: 0;
}

div#mp3_player {
  float: left;
  width: 290px;
  height: 65px;
  background: #000;
  padding: 5px;
}

div#mp3_player>div>audio {
  width: 270px;
  background: #000;
  float: left;
}

div#mp3_player>canvas {
  width: 270px;
  height: 20px;
  background: #002D3C;
  float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!--Hoja y script del reproductor audio-->
  <link rel="stylesheet" type="text/css" href="audio.css">
  <script type="text/javascript" src="audio.js"></script>
</head>

<body>
  <div id="mp3_player">
    <div id="audio_box"></div>
    <canvas id="analyser_render"></canvas>
  </div>
</body>

</html>

La parte:

context = new webkitAudioContext();

se cambió a:

context = new AudioContext();

pero aun así no funciona. También sucede en los dispositivos móviles usando Chrome.

  • ¿Cuál sería la solución en los navegadores de sobremesa y dispositivos móviles?.
  • Aparte del formato MP3, ¿cómo integraría otros formatos OGG y WAV?

Gracias.

1 respuesta 1

1

El diseño no tiene problemas. Es normal que dependiendo del navegador veas uno diseño predeterminado u otro; cada navegador implementa estilos propios por defecto, no es ningún problema de diseño. Si quieres un diseño uniforme puedes ocultar el reproductor por defecto y crear uno. En tu código no veo nada extraño, estás creando un AudioSourceNode a partir del elemento audio. Quizás se deba a un conflicto con código de terceros o que no está cargando correctamente las pistas.

Te voy a poner un ejemplo que ilustra tanto el diseño como el funcionamiento (básico, por cuestiones de tiempo):

const context = new AudioContext();
const sourceBuffer = context.createBufferSource();
const songs = new Map();
songs.set('Deadpool\'s song', 'https://dl.dropboxusercontent.com/s/xti25272jspem2h/deadpool%20music%20video.mp3');
const songsIterator = songs[Symbol.iterator]();
const btnPlayPause = document.getElementById('play-pause-btn');
const songName = document.getElementById('song-name');
const progressbar = document.querySelector('.progress-bar');
const progress = document.getElementById('progress');
let trackStarted = false;

btnPlayPause.addEventListener('click', e => {
  if (!trackStarted) {
    loadSong((name) => {
      // coloca en pantalla el nombre de la canción
      songName.textContent = name;
      play();
      trackStarted = true;
    });
  }
  
  else if (context.state === 'suspended') {
    resume();
  }
  
  else if (context.state === 'running') {
    pause();
  }
});

sourceBuffer.addEventListener('ended', function() {
  btnPlayPause.querySelector('i').textContent = 'play_arrow';
  trackStart = false;
  console.info('Song ended. No more tracks');
});

function loop(timestamp) {
  const trackDuration = sourceBuffer.buffer.duration * 1000;
  const px = progressbar.offsetWidth;
  const width = Number(progress.style.width.replace(/px/, ''));
  const grow = (px * timestamp) / trackDuration;
  progress.style.width = grow + 'px';

  if (timestamp < trackDuration) {
    requestAnimationFrame(loop);
  }
}

function play() {
  // conecta el buffer al destino (salida de audio)
  sourceBuffer.connect(context.destination);
  // empieza a tocar la pista
  sourceBuffer.start(context.currentTime);
  btnPlayPause.querySelector('i').textContent = 'pause';
  requestAnimationFrame(loop);
}

function pause() {
  context.suspend();
  btnPlayPause.querySelector('i').textContent = 'play_arrow';
}

function resume() {
  context.resume();
  btnPlayPause.querySelector('i').textContent = 'pause';
  requestAnimationFrame(loop);
}

function loadSong(cb) {
  const song = songsIterator.next().value;
  const songName = song[0];
  const songURL = song[1];
  
  const xhr = new XMLHttpRequest();
  xhr.open('GET', songURL);
  xhr.responseType = 'arraybuffer';
  xhr.onload = () => {
    const data = xhr.response;
    context.decodeAudioData(data, buffer => {
      sourceBuffer.buffer = buffer;
      cb(songName);
    });
  };
  xhr.send();
}
@import url('https://fonts.googleapis.com/css?family=Rationale');

.player {
  background-color: #313131;
  border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  margin: 25px auto;
  width: 350px;
}

.screen {
  padding: 6px 12px;
}

.screen #song-name {
  color: rgba(255, 255, 255, .8);
  font-family: 'Rationale';
  font-size: 20px;
  text-align: center;
}

.progress-bar {
  background-color: #888;
  display: flex;
  height: 8px;
}

.progress-bar #progress {
  background-color: #16a085;
  display: inline-block;
  height: 100%;
  transition: width .25s ease;
  width: 0%;
}

.control {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 8px;
}

.control button {
  align-items: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border: none;
  border-radius: 100%;
  display: inline-flex;
  justify-content: center;
  margin: 0 5px;
}

.control button:focus {
  outline: none;
}

.control #play-pause-btn {
  background-color: #2980b9;
  height: 40px;
  padding: 8px;
  width: 40px;
}

.control #play-pause-btn:hover {
  background-color: #3498db;
}

.control #play-pause-btn i {
  color: #fff;
}

.control #prev-btn,
.control #next-btn {
  background-color: #888;
  height: 30px;
  width: 30px;
}

.control #prev-btn i,
.control #next-btn i {
  color: #333;
}

.control #prev-btn:hover,
.control #next-btn:hover {
  background-color: #aaa;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="player">
  <section class="screen">
    <p id="song-name">No tracks found</p>
  </section>
  <div class="progress-bar">
    <span id="progress" style="width: 0px"></span>
  </div>

  <section class="control">
    <button id="prev-btn">
        <i class="material-icons">skip_previous</i>
      </button>
    <button id="play-pause-btn">
        <i class="material-icons">play_arrow</i>
      </button>
    <button id="next-btn">
        <i class="material-icons">skip_next</i>
      </button>
  </section>
</div>

En tu caso no necesitas sacar el elemento audio solo necesitas ocultarlo ya que estás creando el nodo de audio de él.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.