- Кнопка выключения звука html
- Доступ к audio в javascript
- Создание объекта Audio в javascript
- Как остановить воспроизведение audio
- События audio
- loadeddata — данные загружены
- error — обработка ошибки загрузки
- onended — окончание воспроизведения
- Изменение свойств audio
- Поддержка элемента Audio и форматов звуковых файлов
- Пример проверки поддержки формата mp3
- Пример проверки поддержки audio и форматов файлов
- Как реализовать кнопку mute?
- 9 ответов на этот вопрос
- Рекомендованные сообщения
- Присоединяйтесь к обсуждению
- Похожие публикации
- Обсуждения
- Кнопка — Включить/выключить звук
- Кнопка выключения звука html
- Остановка плеера по нажатию кнопки
- Код запуска и остановки плеера через javascript
Кнопка выключения звука html
Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере — метод canPlayType.
Доступ к audio в javascript
Если в HTML есть тег audio , доступ к соответствующему объекту Audio можно получить через имя тега
var audio = document.getElementsByTagName('audio')[index]; var audio = document.getElementById('my-audio-id'); Объект Audio также можно создать в js.
Создание объекта Audio в javascript
var myAudio = new Audio(); myAudio.src = 'sound.ogg'; //или var myAudio = new Audio('sound.ogg'); Создание объекта Audio в jQuery
$('audio').attr('src', 'audio_file.mp3') Воспроизведение звука и пауза:
//воспроизведение звука myAudio.play(); // пауза myAudio.pause(); // после паузы воспроизведение продолжится с места остановки myAudio.play(); Как остановить воспроизведение audio
Команды stop нет, и чтобы остановить воспроизведение звукового файла, нужно два действия — пауза и задание нулевого значения для свойства currentTime— текущее время:
// Функция stop для Audio: HTMLAudioElement.prototype.stop = function() < this.pause(); this.currentTime = 0.0; >. // использование myAudio.stop(); События audio
loadeddata — данные загружены
Используем событие loadeddata , чтобы начать воспроизведение большого звукового файла после окончания загрузки:
var loaded = false; var myAudio = new Audio(); myAudio.addEventListener('loadeddata', function() < loaded = true; myAudio.play(); >, false); myAudio.src = 'background.ogg'; Обработчик события окончания загрузки записан раньше, т.к. он должен быть доступен во время загрузки файла, которая начинается сразу после задания src.
error — обработка ошибки загрузки
myAudio.addEventListener('error' , function() < alert('ошибка загрузки файла'); >, false); myAudio.src = 'nofile.ogg'; onended — окончание воспроизведения
Длительность звукового файла
var audio = document.createElement('audio'); audio.src = 'mus3.mp3'; // time=NaN var time = audio.duration; Свойство duration может быть недоступно, если не завершена загрузка метаданных, правильно:
audio.addEventListener('loadedmetadata', function() < time = audio.duration; >); Изменение свойств audio
Используем свойство muted — кнопки включения и выключения звука на странице:
Хотелось бы выключать фоновый звук, когда посетитель сайта переключается на другое окно или вкладку браузера. Важно, что выражение muted=true сработает, если будет выполняться после завершения загрузки звукового файла, т.е. его следует поместить в обработчик события loadeddata:
var loaded = false; var myAudio = new Audio(); myAudio.addEventListener('loadeddata', function() < myAudio.muted = true; >, false); myAudio.src = 'background.ogg'; myAudio.play(); Поддержка элемента Audio и форматов звуковых файлов
Для проверки поддержки форматов звуковых файлов браузером используется метод canPlayType с параметром текстовым значением MIME-типа.
audio.canPlayType('audio/ogg; codecs="vorbis"'); canPlayType возвращает одно из 3 значений:
- probably — наверное
- maybe — может быть
- «» (пустая строка) — формат не поддерживается
Пример проверки поддержки формата mp3
Можете проверить, Opera не поддерживает формата mp3
var audio = new Audio(); var canPlayMmp3 = !!audio.canPlayType && audio.canPlayType('audio/mp3') != ""; if(!canPlayMmp3) Пример проверки поддержки audio и форматов файлов
Если функция check_audio возвращает false, браузер не поддерживает элемент audio. Если элемент audio поддерживается, проверяется возможность использования форматов файлов ogg, mpeg, wav и m4a.
Как реализовать кнопку mute?
хочу сделать отдельную кнопку для включение выключение звука на странице.. для вместо < button >использую обычный рисунок (с hover в стиле ), а вот как задать команду для остановки аудио не знаю.. Уважаемые форумчане, помогите нубу
Ссылка на комментарий
Поделиться на других сайтах
9 ответов на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?
Всем привет!
Может кто помочь, всунуть языковую кнопку на сайт. Сайт делал из шаблона, в html соображаю не очень сильно.
Я так понимаю, можно сделать типа поддомен для другого языка или как проще? Сайт ТУТ.
Спасибо!
Всем привет! Есть такая кнопка:
Не понимаю, как сделать внизу такую темную линию, или через какое свойство достигается «такое» — не знаю как назвать даже.
Подскажите пожалуйста, как это сделать ?
Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо)
“Management of the centre frequently engages media to showcase the success of their residents.
iHUB also provides an opportunity for all their startups to participate in interesting events. For example, we have presented our startup in Oslo thanks to iHUB.”
Nikita Dobrynin & Katia Dobrynina, Founders @ AstraFit
“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”
Stakh Vozniak, CEO @ TONA
“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”
Stakh Vozniak, CEO @ TONA
- 123
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
Кнопка — Включить/выключить звук
Предположим, что у меня на сайте играет фоновая музыка, также есть кнопка «выключить звук». Как сделать, чтобы при клике по этой кнопке музыка отключалась, и выводило уже название кнопки «Включить звук»?
Включить и выключить звук
Здраствуйте. Может кто нибуть помочь мне разобратся в том как можно сделать так что бы при желание.
Включить/выключить звук на сайте
Доброе время суток, возник вопрос как можно на сайте включать и отключать звук? Прочитал много.
Включить выключить блок
Добрый день, нужна помощь как сделать на js, jquery такую задачку, есть три блока один из них.
Как со скрипта включить/выключить кнопку?
Как со скрипта менять свойство disubled?
Сменить состояния открыть\ скрыть в этой теме есть ответ на вопрос про смену состояний. Что касается вопрос про вкл/вкл музыки
Создайте глобальную переменную/объект, где будет храниться аудио. У объекта аудио есть свойство paused, которое возвращает true , если аудио не играет
// @globalAudio - переменная аудио // @button - ссылка на кнопку управления button.onclick = function (e) { if(globalAudio.paused) { /* включаем аудио */ globalAudio.play(); } else { globalAudio.pause(); } }
Кнопка выключения звука html
Чтобы запустить воспроизведение музыки в плеере/тег аудио, нам понадобится сам плдеер:
Далее мы должны определиться с какой клавиши будем запускать воспроизведение — стандартно — это кнопка пробел.
Нам нужно узнать номер кнопки. Идем на страницу определения онлайн номера кнопки.
Следующий пункт, если вы сейчас нажмете пробел, то сработает действие по умолчанию для этой кнопки. А именно перематывание! Поэтому это действие нам нужно отключить:
Далее мне, здесь, на этой странице, как-то нужно отключить это самое действие по умолчанию. Сделаем специальную кнопку, по нажатию на которую отключим это самое действие по умолчанию!
Чтобы мы могли определять, в каком состоянии находится плеер, либо воспроизводит либо нет, то будем очищать атрибут controls, либо отправлять туда слово — «stop»
В переменную «the_var» — будем получать это значение.
Создаем условие, по которому будем проверять и запускать наш плеер на воспроизведение:
if(the_var==’stop’)
<
document.getElementById(‘player’).play();
player.setAttribute(‘controls’, »);
>
Остановка плеера по нажатию кнопки
К выше приведенному коду добавляем иначе и добавляем теперь «pause»:
Вот так он у нас будет выглядеть плеер :
И кнопка отключения действие пробела по умолчанию:
И далее по пробелу — смотрим на плеер.
Код запуска и остановки плеера через javascript
Соберем вместе весь код запуска и остановки плеера оп нажатию на кнопку пробел.