Как создать индивидуальный аудиоплеер с HTML

У меня есть макет для аудиоплеера, который я хотел бы использовать с элементом аудиоплеера HTML.

я пытался<audio></audio>и это дает мне игрока по умолчанию:

Есть ли способ изменить стиль проигрывателя, чтобы использовать макет, который я хочу использовать?

 Marcos Pérez Gude26 мая 2016 г., 09:56
Аудио плеер по умолчанию будет показан, когда вы активировалиcontrols  приписывать. Скрыть элементы управления и писать слои с HTML, связывать события с JavaScript и запускать! Это должно быть закрыто как слишком широкое.
 Pranav Kumar26 мая 2016 г., 08:10
В чем проблема со стандартным. И покажи код, который ты пробовал
 Shawn Erquhart10 июн. 2016 г., 03:43
Нет, это не должно быть закрыто, вопрос в порядке. Проблема с настройкой по умолчанию - это не та, которую он хочет.
 frumbert16 июн. 2016 г., 14:38
@ MarcosPérezGude Точно вопрос, который я имел в виду, когда я пришел посмотреть. Я рад, что этот вопрос не закрыт, поскольку он, очевидно, привлекает стоящие ответы.

Ответы на вопрос(2)

Как я знаю, вы не можете стилизовать плеер по умолчанию, но вы можете создать собственный плеер (на основе вашегоaudio тег) с помощью плагина, такого какplyr.ioВы можете редактировать стиль плагина по своему усмотрению.

Например:

plyr.setup(document.querySelectorAll('.js-plyr'), {});
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.16/plyr.css">
<script src="https://cdn.plyr.io/1.6.16/plyr.js"></script>

<div class="js-plyr">
  <audio controls="" crossorigin="">
    <source src="https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3" type="audio/mp3">
    <source src="https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg" type="audio/ogg" />
  </audio>
</div>

http://jsbin.com/zajeji/edit?html,js,output

 Marcos Pérez Gude26 мая 2016 г., 09:57
Вы можете стилизовать собственный аудиоплеер, просто скрыть элементы управления и сделать свои собственные. Не нужно плагинов.
 Mosh Feu19 янв. 2017 г., 19:51
Извините за задержку. Во всяком случае, это CSS, вы можете настроить его, как вы хотите ..
 Kumar13 янв. 2017 г., 07:10
@MoshFeu Как я могу настроить его, он слишком большой. Я хочу сделать это меньше.
 Marcos Pérez Gude26 мая 2016 г., 10:33
Это действительно легко и быстро сделать аудио контроль. Это действительно сложно отладить плагин. OP не запрашивает плагин, а в правилах stackoverflow сказано, что такого рода вопросы неординарны, поскольку привлекают спам. ОП просит скрыть и настроить элементы управления, а не плагин. Центр помощи:Вопросы с просьбой рекомендовать или найти книгу, инструмент, библиотеку программного обеспечения, учебное пособие или другой сторонний ресурс не по теме для переполнения стека, поскольку они, как правило, привлекают взвешенные ответы и спам. Вместо этого опишите проблему и то, что уже сделано для ее решения.
 Mosh Feu26 мая 2016 г., 10:29
@ MarcosPérezGudeand make your owns что означает, написать код, или вы можете сэкономить свое время и использовать код, который написал кто-то еще, так называемыйплагин.
Решение Вопроса

Вы можете быстро создать очень красивый набор пользовательских элементов управления звуком для аудиоплеера HTML5. Использование (в основном) базового HTML и CSS, с некоторой легкостью обработки событий Javascript - это все, что требуется. Это решение представляет собой полнофункциональный пользовательский аудиоплеер на основе предоставленного дизайна.

Полный код и пример можно найти в jsFiddle:https://jsfiddle.net/mgaskill/zo3ede1c/, Перейдите и играйте с ним как хотите, потому что это действительно рабочий аудиоплеер.

Игрок

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

Кроме того, я немного расширил дизайн, предоставив складной «информационный лоток», который скрывается и отображается нажатием кнопки «Подробнее» справа. Вы можете увидеть развернутый лоток на втором изображении:

Конечно, цвета не идентичны, и могут быть специфичные для пикселя отличия от оригинального дизайна, но это очень близко. Мой основной набор навыков не CSS, так что здесь есть возможности для улучшения. Тем не менее, он очень, очень близок к оригинальному дизайну и сохраняет весь дух, макет и функциональность этого дизайна.

Инструменты

В этом решении для удобства использовалось несколько внешних элементов. Это:

JQuery: потому что я обычно предпочитаю его голому JavascriptjQueryUI: для отслеживания прогресса и регулировки громкости, поскольку индикатор прогресса HTML5 недоступен в некоторых браузерах, особенно в старых версиях IE и некоторых мобильных браузерахFontAwesome: для графики кнопок воспроизведения / паузы и громкости / отключения звукаNoise Addicts Бесплатные образцы MP3: для бриллиантаЗемпер Фиделис МартHTML

HTML использует подход обработки каждого компонента на панели управления звуком как отдельного элемента. Макет HTML довольно пешеходный, и единственными интересными моментами в действительности является использование классов FontAwesome для достижения начальных значков состояния для кнопок воспроизведения / паузы и громкости / отключения звука.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<audio id="player">
    <source src="http://www.noiseaddicts.com/samples_1w72b820/2543.mp3" type="audio/mpeg" />
</audio>

<div id="audio-player">
    <div id="controls">
        <i id="play" class="fa fa-pause"></i>
        <span id="start-time" class="time">00:00</span>
        <div id="progressbar"></div>
        <span id="time" class="time">00:00</span>
        <i id="mute" class="fa fa-volume-up"></i>
        <div id="volume"></div>    
    </div>
    <div id="more-info-box">
        <span id="more-info">MORE INFO</span>
    </div>
    <div id="info-tray">
        Track: <span id="track">Semper Fidelis March</span>
    </div>
</div>

Обратите внимание, что все элементы управления звуком содержатся в#audio-player элемент.

CSS

CSS дает жизнь HTML, и в этом случае используется для обеспечения цвета, размещения и действия.

#audio-player {
    height: 50px;
    width: 500px;
    overflow: hidden;
    background-color: #2B2B2B;
    color: white;
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none;    /* mozilla browsers */
    -khtml-user-select: none;  /* webkit (konqueror) browsers */
    -ms-user-select: none;     /* IE10+ */
}

#controls {
    height: 50px;
    background-color: #808080;
    width: 350px;
}

.time {
    font-size: 10px;
    color: white;
    position: relative;
    top: 14px;
    margin: 5px;
}

.ui-progressbar {
    background: #2B2B2B;
}

.ui-progressbar-value {
    background: white;
}

#progressbar, #volume {
    height: 10px;
    display: inline-block;
    border-radius: 0px;
    border: none;
    position: relative;
    top: 16px;
}

#progressbar {
    width: 150px;
}

#play, #mute {
    font-size: 16px;
    width: 20px;
    position: relative;
    top: 17px;
}

#play {
    margin-left: 15px;
}

#volume {
    width: 50px;
}

#more-info-box {
    display: inline-block;
    width: 150px;
    height: 50px;
    position: relative;
    left: 350px;
    top: -50px;
    padding-top: 18px;
    text-align: center;
    font-family: sans-serif;
    font-size: 12px;
    color: white;
}

#more-info-box, #more-info-box > span {
    cursor: context-menu;
}

#info-tray {
    display: inline-block;
    color: white;
    position: relative;
    width: 100%;
    top: -65px;
    height: 50px;
    padding: 5px;
}

Хотя большая часть этого довольно проста, происходят некоторые интересные вещи.

Во-первых,#audio-player style вызывает специфичные для браузера (но не все) стили, чтобы отключить выбор текста элементов управления:

-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none;    /* mozilla browsers */
-khtml-user-select: none;  /* webkit (konqueror) browsers */
-ms-user-select: none;     /* IE10+ */

Элементы управления jQueryUI прогрессбар оформлены в цветах панели с использованием предопределенных классов:

.ui-progressbar {
    background: #2B2B2B;
}

.ui-progressbar-value {
    background: white;
}

divЭлементы управления на основе сделаны правильно, изменив их макет отображения:

display: inline-block;

Элементы управления размещаются явно в соответствующих местах с использованием относительного расположения:

position: relative;
Javascript

Javascript в значительной степени ориентирован на обработку событий для различных элементов управления и состояний.

var audio_player = $("#audio-player");
var play_button = $('#play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var info_tray = $("#info-tray");
var player = document.getElementById('player');
var duration = 0;
var volume = 0.75;

player.onloadedmetadata = function() {
    duration = player.duration;
    progress_bar.progressbar("option", { 'max' : duration });
};

player.load();
player.volume = 0.75;
player.addEventListener("timeupdate", function() {
    progress_bar.progressbar('value', player.currentTime);
    time.text(getTime(player.currentTime));
}, false);

function getTime(t) {
    var m=~~(t/60), s=~~(t % 60);
    return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}

function getProgressBarClickInfo(progress_bar, e) {
    var offset = progress_bar.position();
    var x = e.pageX - offset.left; // or e.offsetX (less support, though)
    var y = e.pageY - offset.top;  // or e.offsetY
    var max = progress_bar.progressbar("option", "max");
    var value = x * max / progress_bar.width();

    return { x: x, y: y, max: max, value: value };
}

volume_bar.progressbar({
    value : player.volume*100,
});

volume_bar.click(function(e) {
    var info = getProgressBarClickInfo($(this), e);
    volume_bar.progressbar('value', info.value);
    player.volume = info.value / info.max;
});

progress_bar.progressbar({
    value : player.currentTime,
});

progress_bar.click(function(e) {
    var info = getProgressBarClickInfo($(this), e);
    player.currentTime = player.duration / info.max * info.value;
});

play_button.click(function() {
    player[player.paused ? 'play' : 'pause']();
    $(this).toggleClass("fa-play", !player.paused);
    $(this).toggleClass("fa-pause", player.paused);
});

mute_button.click(function() {
    if (player.volume == 0) {
        player.volume = volume;
    } else {
        volume = player.volume;
        player.volume = 0;
    }

    volume_bar.progressbar('value', player.volume * 100);

    $(this).toggleClass("fa-volume-up", player.volume != 0);
    $(this).toggleClass("fa-volume-off", player.volume == 0);
});

more_info.click(function() {
    audio_player.animate({
        height: (audio_player.height() == 50) ? 100 : 50
    }, 1000);
});

onloadedmetadata Обработчик событий используется для определения момента загрузки звука, чтобы можно было инициализировать ход дорожки по длине (продолжительности) звуковой дорожки.

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

volume а такжеprogress_bar элементы инициализируются с помощью элемента управления прогрессом jQueryUI, иclick обработчики установлены, чтобы позволить пользователю щелкнуть внутри, чтобы динамически изменить положение.

play_button а такжеmute_button обрабатывать щелчки, чтобы изменить состояние воспроизведения (воспроизведение / пауза) или состояние звука (громкость вкл / выкл). Эти обработчики динамически меняются в соответствующем классе FontAwesome, чтобы должным образом отражать текущее состояние кнопки.

Наконец,more_info обработчик щелчка показывает / скрывает элемент информационной панели. Скрыть / показать анимируется с помощью jQueryanimate чтобы создать ощущение стерео компонента, напоминающее извлечение лотка CD. Плюс, это дает хорошее ощущение серво контроля. Потому что это то, чего я хотел, и никакой другой причины, кроме этого.

 Michael Gaskill26 июн. 2016 г., 23:54
С удовольствием. Я надеюсь, что это работает для вас. Я наслаждался этим сам. : D
 Daniel26 июн. 2016 г., 23:48
Удивительно ... Спасибо за ответ. я застрял
 Rachel Gallen13 июн. 2017 г., 17:43
Я не знаю, как этот ответ не набрал больше голосов !! Brilliant!

Ваш ответ на вопрос