Пользовательские элементы управления тегами html 5?

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

У меня есть этот html до сих пор, и это не проблема:

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

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

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

По умолчанию элемент не будет выставлять какие-либо элементы управления проигрывателем. Вы можете создавать свои собственные элементы управления с помощью простого старого HTML, CSS и JavaScript. Элемент имеет такие методы, как play() и pause(), и свойство read/write, называемое currentTime. Есть также чтение/запись объема и приглушенных свойств. Итак, у вас действительно есть все, что вам нужно. создайте свой собственный интерфейс.
If you don’t want to build your own interface, you can tell the
для отображения встроенного набора элементов управления. Для этого просто включите атрибут управления в свой тег.

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

Ответ 1

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

<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, и вам хорошо идти!

Ответ 2

Я экспериментировал с использованием графического изображения вместо игрока. Установите стиль в теге "audio" на "display: none, width: 0px; height: 0px;" (дисплей не работает на iPad, поэтому дополнительные настройки ширины-0 и высоты-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

Ответ 3

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

использовать атрибут класса автоопределения:

 <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;
  }

Я надеялся controls имеет некоторые параметры, но не нашли что-то или неправильно поняли. Посмотрим.

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

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