Есть аудиодорожка, мне нужно сменить всю дорожку только на одну иконку play/stop и чтобы аудио включалась по нажатию этой иконки, только в мобильной версии. Я нашел такое решение, но не знаю как заменить play/pause
на мои картинки.
css:
@media all and (min-width: 320px) {
#audioControl {
display: none;
overflow: hidden;
}
}
@media all and (max-width: 1170px) {
#audioControl {
display: block;
}
}
html:
<a href="#" id="audioControl">play!</a>
js:
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;
};
Помогите решить, не знаю как сделать. Спасибо.
Допустим, есть картинки с именами img-1.jpg и img-2.jpg в папке img:
var yourAudio = document.getElementById('yourAudio'),
playpauseimg = document.getElementById('playpauseimg');
playpauseimg.onclick = function () {
// Update the Button
playpauseimg.src = "img/" + yourAudio.paused ? 'img-1.jpg' : 'img-2.jpg';
// Update the Audio
var method = yourAudio.paused ? 'play' : 'pause';
yourAudio[method]();
};
<audio id="yourAudio" src="sound.mp3"></audio>
<img id=playpauseimg src="img/img-2.jpg"/>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть такая фигурка - Форма белого квадрата Подскажите как реализовать?
Приложение UWPВ манифесте проекта язык по умолчанию указан "ru-ru"