Наша взаимовыгодная связь https://banwar.org/
Як додати 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 плеєр на свій сайт?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
