Кнопка playPause вместо текста в JavaScript - PullRequest
Новая
       1

Кнопка playPause вместо текста в JavaScript

0 голосов
/ 29 апреля 2019

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

HTML: 

<body>
<button id="audioControl" onclick="Play()">Play</button>
<canvas id="progress" width="500" height="100"></canvas>
<audio id="audio" ontimeupdate="progressBar()" 
  src="horse.mp3">
</audio>
<br>

JS: 

var audioElement = document.getElementById("audio")
var canvas = document.getElementById("progress").getContext('2d')
var audio_ctrl = document.getElementById('audioControl')
function Play() {
var play = audio_ctrl.innerHTML === 'Play'
var method
if (play) {
 audio_ctrl.innerHTML = 'Pause'
method = 'play'
} else {
 audio_ctrl.innerHTML = 'Play'
 method = 'pause'
}
audioElement[method]()
}

Может кто-нибудь помочь мне изменить, чтобы сделать эту игру / паузу какизображение

1 Ответ

1 голос
/ 29 апреля 2019

Вам просто нужно изменить свою кнопку на другой элемент, стилизовать ее и играть на ней по клику.

Здесь я обновил / расширил ваш код: 

<body>
<button id="audioControl" onclick="Play()">Play</button>
<div id="audioControlImage" style="width: 50px; height: 50px; background: url('https://image.flaticon.com/icons/svg/149/149668.svg')" onclick="Play()"></div>
<canvas id="progress" width="500" height="100"></canvas>
<audio id="audio" ontimeupdate="progressBar()" 
  src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3">
</audio>
<br>
<script>
var audioElement = document.getElementById("audio")
var canvas = document.getElementById("progress").getContext('2d')
var audio_ctrl = document.getElementById('audioControl')
var audio_ctrl_image = document.getElementById('audioControlImage')

function Play() {
    var play = audio_ctrl.innerHTML === 'Play'
    var method
    if (play) {
        audio_ctrl.innerHTML = 'Pause'
        audio_ctrl_image.style.background = "url('https://image.flaticon.com/icons/svg/8/8725.svg')"
        method = 'play'
    } else {
        audio_ctrl.innerHTML = 'Play'
        audio_ctrl_image.style.background = "url('https://image.flaticon.com/icons/svg/149/149668.svg')"
        method = 'pause'
    }
    audioElement[method]()
}
</script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...