HTML 5 аудио тег пользовательских элементов управления? - PullRequest
Новая
       1

HTML 5 аудио тег пользовательских элементов управления?

26 голосов
/ 03 октября 2011

Мне кажется, что я принимаю сумасшедшие таблетки, потому что не могу понять, как сделать аудио-тег html 5 с пользовательскими элементами управления.

У меня есть этот HTML, и он работает без проблем: 

<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>

Как заставить его отображать ТОЛЬКО кнопку воспроизведения, и, возможно, при воспроизведении показать кнопку паузы на своем месте.

Из того, что я прочитал,

По умолчанию элемент не предоставляет никаких видов управления игроками. Вы можете создавать свои собственные элементы управления с простым старым HTML, CSS и JavaScript. Элемент имеет методы, такие как play () и pause () и свойство чтения / записи с именем currentTime. Есть также чтение / запись громкость и приглушенные свойства. Таким образом, у вас действительно есть все, что вам нужно создайте свой собственный интерфейс.

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

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

Ответы [ 3 ]

36 голосов
/ 03 октября 2011

Вы создаете свои элементы так ... 

<audio id="yourAudio" preload='none'>
    <source src='the url to the audio' type='audio/wav' />
</audio>
<a href="#" id="audioControl">play!</a>

И добавить некоторые функции: 

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};

Прямо сейчас, кнопка представляет собой простой текст («play!» Или «pause!»), Но вы можете делать практически все, что захотите, с помощью CSS. Вместо установки innerHTML установите className, и все готово!

5 голосов
/ 14 ноября 2012

Я экспериментировал с использованием графики вместо плеера. Установите стиль в тэге 'audio' на "display: none; width: 0px; height: 0px;" (не отображать ни один не работает на iPad, таким образом, дополнительные настройки width-0 и height-0). Также не должен работать атрибут «controls». (разные системы / браузеры и десктоп против iOS работают по-разному .....)

Например: 

<head>
<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.play();
}
</script>
</head>

<body>
Click the speaker to hear the sound.  <a href="javascript:null()" onClick="EvalSound('sound1'); return false;">
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer>
</body>

«javascript: null ()» работает на iPad в сочетании с «return false;» в отличие от обычного "#".

Для получения более полезной информации: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

4 голосов
/ 14 января 2014

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

использовать атрибут класса autio-tag: 

 <audio controls preload='auto' class="audio_volume_only"><source src='the url to the 
audio' type='audio/mp3' /></audio>

и соответствовать css: 

 .audio_volume_only {
    width: 35px;
  }

Я надеялся, что control имеет некоторые параметры, , но не найден или неправильно понят .. посмотрим.

, затем, возможно, используйте onplay аудио - событие , чтобы изменить css в соответствии с вашими потребностями.кнопка воспроизведения станет кнопкой паузы во встроенных элементах управления

, как указали другие, вы всегда можете сделать свой собственный ....

...