Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Вставка МР3 плеера на страницу

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

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

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

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

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

В HTML страницы ..средствами CMS.
Нет дружище. CMS не пойдет. Мне для offline прослушивания надо. Чтобы чедловек принес на флешке, вставил в ПК или ноут, по навигации и слушает без подключения к инету.
Постоянный участник
Степаныч
Медаль
Сообщений: 639
4 дня назад
Не знаю насколько корректно использование 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
Сообщений: 22
878 дней назад
Степаныч:

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