Prefacio: Este es un resumen de las pequeñas demostraciones que he aprendido recientemente. Todavía es un largo camino de usarlos, pero aún es bueno practicar y consolidar puntos de conocimiento. Recientemente, estaba navegando por el código fuente de JS Books y Boostrap.css. Después de hacer esta demostración, es un final temporal. El siguiente es el código fuente de jQuery y el código fuente de Boostrap.js. La tarea es muy ardua. Vamos, no publicaré el código en todo el artículo. Si está interesado, puede enviarme un mensaje y puede pasarle el código ~
texto:
Primero, las representaciones
1. Diseño: el diseño receptivo y adaptativo en Boostrap no puede ser eliminado. La fila anidada en el contenedor se anidada a un lado y Main (H5 New Tag) y Div (id = "MusicConsole") respectivamente. Aparte de la lista de música a la izquierda, Main es el cuadro de visualización de letras a la derecha, y Div es el cuadro de control a continuación.
2. Funciones principales de implementación:
(1) Agregue canciones (el icono "+" en la esquina superior derecha de la lista de canciones) y elimine las canciones (el ícono "Trump" en la esquina superior derecha de la lista de canciones)
(2) Haga clic en la canción en la lista de canciones: para la canción se reproducirá; Si hay letras, se mostrarán las letras, y si no hay letras, se mostrarán las "no letras"; La barra de progreso y el tiempo cambiarán a medida que se suice la canción.
(3) Haga clic en el botón anterior (línea vertical + triángulo) y se reproducirá la canción anterior: Si hay letras, la letra se mostrará desplazamiento, y si no hay letras, se mostrarán las "no letras"; La barra de progreso y el tiempo cambiarán a medida que se suice la canción.
Al hacer clic en el botón Play (Triángulo) cambiará al botón de pausa (líneas verticales dobles), y la canción también cambiará del estado de reproducción al estado de pausa en consecuencia.
Haga clic en el botón Siguiente (Triángulo + Línea Vertical) y se reproducirá la siguiente canción: Si hay letras, se mostrará la letra, y si no hay letras, se mostrarán las "No letras"; La barra de progreso y el tiempo cambiarán a medida que se suice la canción.
Al hacer clic en el botón de audio (altavoz), se convertirá en un botón de silencio (altavoz + "x"), y la canción también se mudará en consecuencia.
Haga clic en el botón de bucle (círculo con flechas) se convertirá en una sola reproducción. Mantenga el botón de bucle y se repitirá el bucle único.
3. Problemas encontrados:
(1) El tamaño del glificón se cambia por el tamaño de la fuente
Debido a que se usa el icono de boostrap, el tamaño predeterminado es demasiado pequeño. Intenté ancho y altura pero no respondí. Me di cuenta de que usaba el tamaño de la fuente para cambiar el tamaño.
(2) Str.Replace (Oldstr, Newstr)
Al hacer clic en el botón Reproducir, el estado de reproducción se cambiará y el icono del botón se cambiará en consecuencia. Por lo tanto, se usa reemplazo, pero no ha respondido durante mucho tiempo. Resultó que es porque está regenerando una cadena, no directamente en la cadena original, Orz
(3) Es difícil para los navegadores leer archivos locales debido a consideraciones de seguridad
Originalmente planeé usar LocalStorage para almacenar los contenidos en la lista de música, pero lo probé con FileReader de H5 durante mucho tiempo, pero no había forma. Tuve que rendirme.
FileReader se puede usar para leer imágenes o archivos HTML. Su método ReadAsDataurl puede obtener la ruta del archivo. Hablando de esto, realmente quiero reír. Traté de guardar un archivo de música. Ok, vamos, ¿qué? ¿LocalStorage se está quedando sin memoria? 5m guarda una ruta de archivo? ¿Facultad de mí?
Las siguientes preguntas están en la letra. . . Me siento muy cansado cuando lo hago. . .
(4) Problemas encontrados al analizar letras
Las letras suelen ser archivos LRC, pero en realidad son texto sin formato. Use AJAX para obtener datos transmitidos desde el fondo, pero no hay antecedentes para jugar conmigo, por lo que solo puedo copiar la letra directamente y escribirlos en una cadena como datos muertos.
Originalmente se planeó usar Split ('/R/N') para dividir la cadena en letras de oración por oración y ponerla en una matriz.
Como resultado, informé varios errores. Después de un largo tiempo de trabajo, finalmente lo encontré en esta división. Lo revisé en línea durante mucho tiempo, y resultó ser el bote JS.
Debido a que la sintaxis JS no obliga a que se agregue un punto y coma al final, el uso de la ruptura de la línea del sistema (es decir, el retorno del carro) se atascará. Hay dos planes de respuesta principales:
1) Elimine manualmente el carácter de Newline y use /N Newline en su lugar. Esta solución tendrá un efecto nuevo en la página.
2) Agregar / Antes del carácter de ruptura de línea del sistema, este esquema no tiene efecto de ruptura de línea en la página
(5) Problemas encontrados al desplazarse
Después de agregar la letra con éxito, se muestra perfectamente, pero debe sincronizarse con la música. En comparación con el tiempo de reproducción actual, cuánto se mueve la lista de letras correspondiente hacia arriba, cuando las letras están vacías, el juicio límite final, y después de que se resuelven todos estos problemas, aparece una reproducción de bucle, y la letra no se puede mostrar nuevamente. Después de mucho tiempo, fui allí. Fue porque cuando bucle = verdadero, el evento final no se pudo escuchar. No había forma, por lo que solo pude abandonar el bucle y agregar el juicio del bucle al evento final.
Bueno, es muy bueno, perfectamente exhibido, y estoy un poco emocionado. Es un poco desordenado en todas partes, y la prueba muestra si hay algún problema. Cuando pensé que sería posible terminar, cometí otro error [indiFference.jpg], así que ajustemoslo. Primero descubra el motivo del error. En la herramienta de desarrollador F12 (fui a Baidu, que es lo que escribí anteriormente), vi que se han agregado dos letras al mismo tiempo, por lo que el desplazamiento hacia arriba será muy rápido, y saltará hacia arriba y hacia abajo un tiempo. Se encontró al culpable, SetTimeOut. Debido a que es una llamada recursiva, se necesita clcleartimeout para limpiarla. Ok, básicamente no hay ningún problema ahora.
Luego:
Ah, y, debido a que el ciervo rojo recientemente me fascina, llamé amablemente a mi jugador "jugador de Marruecos" ~ [Big Brother Bihart] Tomó tres días hacer esta demostración, y las letras solas se ajustaron más de la mitad del tiempo. Y puedes ver que los principales problemas encontrados fueron los problemas de exhibición de la letra, y estaba borracho. Sin embargo, pase lo que pase, finalmente lo logré. Al ver que finalmente se implementó normalmente, la sensación de logro todavía era muy buena. Aunque estaba hecho, justo cuando estaba escribiendo este blog, encontré el error de Orz nuevamente.
Lo anterior es lo que el editor le presentó para crear un reproductor de música simple usando HTML5+Boostrap. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!