Implementar simple reproductor de música web con JavaScript

Implementar simple reproductor de música web con JavaScript

Recientemente epidemia en casa, utilizar este tiempo comenzó a aprender por sí mismo HTML y otros contenidos, está escribiendo actualmente su propio personal, quiero añadir características a su punto de origen con la música.
Comience con un simple añadir música etiqueta de audio, para que las propiedades de reproducción automática y bucle, pero en esta página de prueba para hacer amigos cuando se trataba de la cuestión:

Esta pregunta implica, Safari no jugará inserta automáticamente en ausencia de funcionamiento de la música de un usuario , que la reproducción automática no sirve de nada, pero viene con control de audio no es muy bonito, puso la esquina superior izquierda del módulo de control no es muy armonioso.

Con el fin de resolver todos los navegadores se reproducen correctamente, entonces directamente a hacer un simple reproductor de música muy bien.

He buscado los muchos métodos de Internet, pero muchos aspectos, las directrices son menos claros para los primeros entrantes, pero también tengo un poco de sus propias exigencias estéticas, fue aquí para compartir mi última forma integral en línea para salir de un simple reproductor de música, un hombre de pocas palabras, dijo, la primera en el código:

código JavaScript:

function playPause() {
    var music = document.getElementById('music');
    var music_btn = document.getElementById('music-btn');
    if (music.paused){
        music.play();
        music_btn.src='pause.png';
    }
    else {
        music.pause();
        music_btn.src='play.png';
    }
}//播放和暂停合一，默认是打开页面点击播放，点击后播放键就会变为暂停键
//这里只是我想二合一，其实可以分开的，原理一样，把两个判断分到两个按钮，写两个function就ok啦
var music1 = new Array();
music1 = ["笑场.mp3",
    "刚刚好.mp3",
    "陪你去流浪.mp3",
    "哑巴.mp3",
    "怪咖.mp3"];//用数组存储所有歌曲的路径
//如果是本地的音乐，就写本地的路径，如果你使用了云存储，就把url放在这里就好了
var num=0;
var n=music1.length;//获取数组的长度
function lastmusic() {
    num = (num+n-1)%n;
    music.src = music1[num];
    music.play();
}//切上一首歌
function nextmusic() {
    num = (num+1)%n;
    music.src = music1[num];
    music.play();
}//切下一首歌
window.onload=function () {
    music.addEventListener('ended', function () {
        nextmusic();
    },false)
}//自动连播功能，监听播放情况，结束之后就调用下一首歌的函数

código HTML:

<audio preload id='music'><source src="笑场.mp3"></audio>
<a href="javascript:lastmusic()"><img src="previous.png" width="96" height="96" border="0"></a>
<a href="javascript:playPause()"><img src="play.png" width="96" height="96" id="music-btn" border="0"></a>
<a href="javascript:nextmusic()"><img src="next.png" width="96" height="96" border="0"></a>
//插入图片且引用上面的函数，实现功能

Aquí he combinado algunos puntos:

• combinación de teclas, y variará de acuerdo con el tiempo, el jugador se convierte en pausa, pausa, reproducción de cambio (que aquí hay una referencia al programa en línea).
• En la parte matriz, métodos en línea sólo se guardan el nombre, y luego, al final de la función src más el" .mp3" , a fin de lograr la canción, este método se aplica a los archivos locales, pero para el uso de almacenamiento de objetos OSS es sólo un enlace directo , ha sido sustituido por la dirección de depósito directo, se puede aplicar la OSS.
• Etiqueta con un js llamada, las teclas se puede hacer más atractiva, ya que no es etiqueta de botón, incluso si se inserta el icono, habrá un círculo exterior del marco, se ve bien.
• Acerca de Auto Lianbo allí, tutorial en línea es decirle utiliza addEventListener, pero no se añaden directamente en él, y se quejan en el sentido de que reciben menos que el objeto, la página web de código de script javascript menudo necesitan ser capaces sólo para completar, después de cargar el documento para llevar a cabo, puede causar la situación no puede obtener el objeto, la adición de window.onload puede ser activado después de que se carga el documento, un error puede ser evitado.

Lograr resultados:

Play:

Pausa:

el icono se utiliza aquí es el diseño de materiales de Google, de código abierto, puede buscar en Internet, o llamar su propio icono de reemplazo.

Las últimas palabras:

Los principiantes pueden ser una conciencia más profunda de los principios no está en su lugar, los errores y omisiones comentario, me corrigen! Este artículo trata sobre la integración de la guía de aprendizaje en línea sobre, los principiantes pueden entender más fácilmente comprendido con mayor rapidez, y el rey de estímulo mutuo! Aprender juntos!