Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

audio player на сайті

Як додати mp3 плеєр на свій сайт? Щоб був, як можна простіше, але при цьому максимально кастомизировать. Умів програвати всякі audio формати (mp3, wma і т.д.).

Дуже просто! Представляю Вам чудовий аудіо і відео програвач jplayer .

На сайті розробника є безліч демо. Якщо коротко, то плеєр вміє практично все. Програвати музику і відео, підтримує плейлисти, кастомниє скіни, свої елементи управління. Працює це чудо на flash, але якщо браузер "в порядку" і вміє відтворювати потрібний формат з під коробки, то використовується тільки браузер (html5). Наприклад Опера не вміє програвати mp3, а вебкіти вміють. Повний опис підтримуваних браузером фич є в їх керівництві

Прикладів на сайті безліч, я ж наведу лише один. Качаємо останню версію плеєра. Підключаємо до сторінці два файли

<Script type = "text / javascript" src = "./ jplayer / js / jquery.jplayer.min.js"> </ script> <link href = "./ jplayer / skin / blue.monday / jplayer.blue. monday.css "rel =" stylesheet "type =" text / css "/> <div class =" jp-jplayer "> </ div>

по суті для роботи плеєра потрібен тільки jquery . jplayer .min.js, а css файл всього лише відповідає за "шкірку". Ви можете легко написати свою.

далі код

$ ( '. Jp-jplayer'). JPlayer ({ready: function (event) {mp3: '/ music / media.mp3',}, cssSelectorAncestor: "# jp_container_1", solution: "flash, html", swfPath: "/ jplayer / js", supplied: "mp3, wma", wmode: "window"});

Як бачите mp3 файл повинен лежати на Вашому сервері. Якщо ж ви хочете слухати онлайн безкоштовно то можна підключити віддалений файл, за його url

Залишилося підключити шкурку

<Div id = "jp_container_1" class = "jp-audio"> <div class = "jp-type-single"> <div class = "jp-gui jp-interface"> <ul class = "jp-controls"> <li> <a href = "javascript :;" class = "jp-play" tabindex = "1"> play </a> </ li> <li> <a href = "javascript :;" class = "jp-pause" tabindex = "1"> pause </a> </ li> <li> <a href = "javascript :;" class = "jp-stop" tabindex = "1"> stop </a> </ li> <li> <a href = "javascript :;" class = "jp-mute" tabindex = "1" title = "mute"> mute </a> </ li> <li> <a href = "javascript :;" class = "jp-unmute" tabindex = "1" title = "unmute"> unmute </a> </ li> <li> <a href = "javascript :;" class = "jp-volume-max" tabindex = "1" title = "max volume"> max volume </a> </ li> </ ul> <div class = "jp-progress"> <div class = " jp-seek-bar "> <div class =" jp-play-bar "> </ div> </ div> </ div> <div class =" jp-volume-bar "> <div class =" jp- volume-bar-value "> </ div> </ div> <div class =" jp-time-holder "> <div class =" jp-current-time "> </ div> <div class =" jp- duration "> </ div> <ul class =" jp-toggles "> <li> <a href =" javascript :; " class = "jp-repeat" tabindex = "1" title = "repeat"> repeat </a> </ li> <li> <a href = "javascript :;" class = "jp-repeat-off" tabindex = "1" title = "repeat off"> repeat off </a> </ li> </ ul> </ div> </ div> </ div> </ div >

будь-який елемент з шкурки можна викинути, все буде працювати. За те, що саме ця шкурка відповідає за конкретний плеєр відповідає опція cssSelectorAncestor, в яку заносимо id шкурки. Як я вже писав вище сам скін і не потрібен, для функціонування. І якщо наприклад після ініціалізації зробити так

$ ( '. Jp-jplayer'). JPlayer ( "play");

то обрана мелодія одразу заспіває. Повний перелік команд дивіться в документації.

Розповісти друзям

Як додати mp3 плеєр на свій сайт?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

    Веселые задачи по математике 2 класс
    Во время занятий для того, чтобы немного переключить внимание школьников, но при этом не уйти от предмета, можно давать шутливые задачи на сообразительность. Буду пополнять коллекцию таких задач. Дополнительная

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: