[РЕШЕНО] Вставка МР3 плеера на страницу
Вставка МР3 плеера на страницу для offline прослушивания.
Overin
Привет всем!
Подскажите, может кто уже пробовал. Как вставить МР3 плеер для offline прослуживания аудиофайлов? Спрашиваю потому как делаю электронный учебник для студентов английского и мне нужно, чтобы они слушали на ПК или ноуте аудиофайлы. (artisteer служит для создания обложки и навигации по учебнику)
И чтобы код плеера одинаково хорошо воспроизводился на всех браузерах.
Заранее благодарен.
Степаныч
В HTML страницы штатной возможности нет. В последних Wordpress есть возможность вставки этой фишки из коробки, без плагинов, в страницу, средствами CMS.

Поэтому наверное пути два.
Первый, сделать сайт на WP.
Второй, каждый раз вставлять плеер в ручную использовав сервис типа этого:

Скрытый текст виден только зарегистрированным пользователям

Этот сервис не пробовал, но можно посмотреть.

Первый, более удобный, так как предполагаю что в Вашем случае это будет довольно много страниц и вставлять придется много.
Overin
Степаныч:

В HTML страницы ..средствами CMS.
Нет дружище. CMS не пойдет. Мне для offline прослушивания надо. Чтобы чедловек принес на флешке, вставил в ПК или ноут, по навигации и слушает без подключения к инету.
Степаныч
Не знаю насколько корректно использование HTML страниц без среды эмулятора хостинга.

Но тогда только вставлять в ручную.

Делаем так:
Используем этот плеер, он прост в установке:

Скрытый текст виден только зарегистрированным пользователям


Прикрутил его к дефолтному шаблону программы, которая стоит по умолчанию
Вот готовый архив с прикрученным для примера:
Скрытый текст виден только зарегистрированным пользователям


Порядок прикручивания.

1. скачиваем архив с плеером, с сайта плеера, берем из архива папку audiojs и бросаем в корневую папку сайта.
2. Открываем ВСЕ файлы страниц HTML и добавляем перед закрывающим тегом head, код подключения скрипта (у меня в архиве помечен комментарием, что добавлять):

Код PHP:
  1.  
  2. <!-- audio pleer-->
  3. <script src="./audiojs/audio.min.js"></script>
  4. <script>
  5. audiojs.events.ready(function() {
  6. audiojs.createAll();
  7. });
  8. </script>
  9. <!-- and audio pleer-->
  10.  
В файл стилей style.css в самый конец добавляем:

Код PHP:
  1.  
  2. .play-pause p {
  3. margin: 0 !important;
  4. }
  5.  
Теперь в нужное место страницы (у меня тоже помечено комментами) вставляем сам плеер:

Код PHP:
  1.  
  2. <!--audio pleer-->
  3.  
  4. <audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" preload="auto"></audio>
  5.  
  6. <!-- and audio pleer-->
  7.  
Где
Скрытый текст виден только зарегистрированным пользователям
ссылка до трека.

То есть надо создать еще папку для треков так же в корне сайта, например mp3

И ссылки будут примерно такого вида (но может ошибаюсь с относительным путем)

./mp3/juicy.mp3
Overin
Степаныч:

Порядок прикручивания...
Отлично, дружище. Достойный ответ мастера. Благодарю. Играет во всех браузерах, кроме Opera. Все отображает, нажимаешь на кнопку, а не проигрывает. Но этим браузером уже мало пользуются по статистике. Можно в пояснениях рекомендовать браузеры.
Буду пилить дальше.Добавлено спустя 1 минутуВсе good
Перейти на форум: