ПРЕДИСЛОВИЕ: Это краткое изложение небольших демонстраций, которые я изучил недавно. Это все еще долгий путь, но все еще хорошо практиковать и консолидировать точки знаний. Недавно я просматривал исходный код JS Books и Boostrap.css. После этого демонстрация, это временный конец. Следующим является исходный код jQuery и исходный код Boostrap.js. Задача очень тяжелая. Давай, я не буду публиковать код во всей статье. Если вам интересно, вы можете отправить мне сообщение, и вы можете передать вам код ~
текст:
Во -первых, визуализации
1. Метка: отзывчивый и адаптивный макет в Boostrap не может быть устранена. Затем вложенная строка в контейнере в сторону и основной (H5 New Tag) и Div (id = "MusicConsole") соответственно. Помимо списка музыки слева, Main - это ящик текста справа, а Div - поле управления ниже.
2. Основные функции реализации:
(1) Добавить песни (значок «+» в правом верхнем углу списка песен) и удалить песни (икона «Трамп» в правом верхнем углу списка песен)
(2) Нажмите на песню в списке песен: для трека будет воспроизведена; Если есть текст, текст будет отображаться, и если текст нет, будет отображаться текст "нет текстов"; Бар и время прогресса изменится, когда играет песня.
(3) Нажмите на предыдущую кнопку (вертикальная линия + треугольник), и предыдущая песня будет воспроизведена: Если есть текст, текст будет отображаться прокрутка, и если будет отображаться тексты песен, будет отображаться; Бар и время прогресса изменится, когда играет песня.
Нажав кнопку воспроизведения (треугольник), изменится на кнопку паузы (двойные вертикальные линии), и песня также соответственно изменится от состояния воспроизведения на состояние паузы.
Нажмите кнопку «Следующая кнопка» (Triangle + Vertical Line), и следующая песня будет воспроизведена: Если будет отображаться тексты песен, будет отображаться лирика, и если текст не будет, будет отображаться тексты песен; Бар и время прогресса изменится, когда играет песня.
Нажав на аудио кнопку (динамик), она станет кнопкой отключения (динамик + "x"), и песня также станет нематкой соответственно.
Нажатие кнопки цикла (кружок со стрелками) станет одним воспроизведением. Держите кнопку петли, и один цикл будет повторяться.
3. Проблемы столкнулись:
(1) Размер глификона изменяется с помощью шрифта
Поскольку используется значок Boostrap, размер по умолчанию слишком мал. Я попробовал ширину и высоту, но не ответил. Я понял, что использовал размер шрифта, чтобы изменить размер.
(2) str.replace (Oldstr, Newstr)
Нажав кнопку воспроизведения, статус воспроизведения будет изменен, и значок кнопки будет изменен соответствующим образом. Поэтому используется замена, но он давно не отвечал. Оказалось, что это потому, что она регенерирует строку, а не непосредственно на исходной строке, ORZ
(3) Браузерам трудно читать локальные файлы из -за соображений безопасности
Первоначально я планировал использовать LocalStorage для хранения содержимого в списке музыки, но я долгое время пробовал его с H5 FileReader, но никакого пути не было. Я должен был сдаться.
FileReader может использоваться для чтения изображений или HTML -файлов. Его метод readasdataurl может получить путь файла. Говоря об этом, я действительно хочу смеяться. Я попытался сохранить музыкальный файл. ОК, поехали, что? LocalStorage не хватает памяти? 5M сохраняет путь файла? Забавно меня?
Следующие вопросы все в текстах. Полем Полем Я чувствую себя очень усталым, когда делаю это. Полем Полем
(4) Проблемы, возникающие при анализе текста
Тексты, как правило, являются файлами LRC, но они на самом деле являются простым текстом. Используйте Ajax, чтобы получить данные, передаваемые с фона, но нет фона для поиска со мной, поэтому я могу только копировать текст и написать их в строке в качестве мертвых данных.
Первоначально было запланировано использовать Split ('/r/n'), чтобы разбить строку в лирику предложения по предложению и положить ее в массив.
В результате я сообщил о различных ошибках. После долгого времени работы я наконец нашел это на этом расколе. Я проверял его в Интернете в течение долгого времени, и это оказалось горшочком JS.
Поскольку синтаксис JS не заставляет добавлять полуколон в конце, используя разрыв системной линии (то есть возврат перевозки) будет застрять. Есть два основных плана ответов:
1) Вместо того, чтобы вручную удалить символ Newline и использовать Newline. Это решение будет иметь новый эффект на странице.
2) Добавить / перед символом разрыва системной линии эта схема не имеет эффекта разрыва линии на странице
(5) Проблемы, возникающие при прокрутке текста
После того, как текст добавлена успешно, он отображается идеально, но она должна быть синхронизирована с музыкой. Сравнивая с текущим временем воспроизведения, сколько соответствующий список текстов движется вверх, когда текст пуста, окончательное граничное суждение, и после того, как все эти проблемы решаются, появляется воспроизведение петли, и текст не может быть отображена снова. Через долгое время я пошел туда. Это было потому, что когда Loop = True, окончательное событие нельзя прослушать. Там не было никакого пути, поэтому я мог только отказаться от петли и добавить суждение о петле в окончательное событие.
Ну, это очень хорошо, идеально отображается, и я немного взволнован. Это немного грязно везде, и тест показывает, есть ли проблемы. Когда я подумал, что это можно было бы закончить, я совершил еще одну ошибку [безразличием. Сначала узнайте причину ошибки. В инструменте разработчика F12 (я отправился в Байду, что я написал выше), я увидел, что две тексты были добавлены одновременно, поэтому прокрутка вверх будет настолько быстрой, и она будет прыгать вверх и вниз. Виновник был найден, Settimeout. Поскольку это рекурсивный вызов, Clcleartimeout необходим для его очистки. Хорошо, сейчас нет проблем.
Позже:
Ах, и, поскольку недавно я очарован красным оленем, я любезно назвал своего игрока «Марокко -игрок» ~ [Большой брат Бихарт], чтобы сделать эту демонстрацию, потребовалось три дня, и только лирика была скорректирована более половины времени. И вы можете видеть, что основными проблемами возникли проблемы с дисплеем текста, и я был пьян. Однако, несмотря ни на что, я наконец сделал это. Видя, что он наконец -то раскатался, чувство выполненного долга все еще было очень хорошим. Хотя это было сделано, так же, как я писал этот блог, я снова нашел ошибку ORZ.
Выше приведено то, что редактор представил вам, чтобы создать простой музыкальный проигрыватель с использованием HTML5+Boostrap. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!