Два щелчка differnets (текст и изображение) и воспроизведение звука

У меня есть текст и изображение, которое я добавляю каждому атрибуту onclick="playAudio()".Два щелчка differnets (текст и изображение) и воспроизведение звука

<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1> 
<img onclick="playAudio()" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test">

Я хочу сделать следующее. Если я нажимаю текст, воспроизводящий аудио, иначе, если я нажму, изображение перестанет воспроизводить звук по тексту и воспроизводит звук на изображении. Как это сделать?

HTML audio.

<audio id="myAudio"> 
    <source src="sound.ogg" type="audio/ogg"> 
    <source src="sound.mp3" type="audio/mpeg"> 
    Your browser does not support the audio element. 
</audio>

И JS.

var x = document.getElementById("myAudio"); 
function playAudio() { 
    x.play(); 
}

источник

2017-02-01 alexwebgr

Но есть только один звук. Вы хотите сказать, что нажав на любой текст или изображение, звук будет воспроизводиться/приостанавливаться поочередно? –

Да, есть. Я не упоминал. Я имею в виду, если я нажимаю текст на текстовом воспроизведении звука, но если я нажимаю на изображение, перестаю воспроизводить звук по тексту и воспроизводить аудио на изображении. – alexwebgr

Вот чрезмерно упрощенным код, который:

var audio1 = document.getElementById("audio1"), 
    audio2 = document.getElementById("audio2"), 
    whoIsPlaying = null; 

function clickOnH1() { 

    if (whoIsPlaying != 'H1') { 

    audio2.pause(); 
    audio1.play(); 
    whoIsPlaying = 'H1'; 
    } 
} 

function clickOnIMG() { 

    if (whoIsPlaying != 'IMG') { 

    audio1.pause(); 
    audio2.play(); 
    whoIsPlaying = 'IMG'; 
    } 
}

clickOnH1 функция должна перейти в onclick атрибут тега H1 и clickOnIMG функция должна перейти в onclick атрибут IMG тега ,

источник

2017-02-01 07:59:04

Hello Blaze :). – alexwebgr

@alexwebgr Работало ли это? –

Привет. Поскольку я новичок, у меня есть вопрос. Почему вы помещаете whoIsPlaying и в if (условное утверждение) вы написали (whoIsPlaying! = «H1» после того, как вы скажете whoIsPlaying = «H1»? Можете ли вы объяснить, пожалуйста, мне? :) – alexwebgr

Вы найдете ниже фрагмент кода передать this в качестве аргумента, чтобы мы могли получить tagName из щелкнули элемента и чем ставить условия соответственно ..

var x = document.getElementById("myAudio"); 
 
function playAudio(e) { 
 
    if(e.tagName == "IMG") 
 
    { 
 
    alert('Stop') ; 
 
    } 
 
    if(e.tagName == "H1") 
 
    { 
 
    alert('Play') ; 
 
    } 
 
    
 
}

<h1 class="underline-on-hover" onclick="playAudio(this)" onmouseover="" cursor: pointer;">Test.</h1> 
 
<img onclick="playAudio(this)" onmouseover="" style="cursor: pointer;" class="img-responsive" src="imagetest.png" alt="Image Test" />

источник

2017-02-01 07:30:24 Curiousdev

Несколько источников аудио помечать Безразлично Так работайте.

Что-то вроде этого должно работать, если вам нужно только обработать изображение, нажмите сразу после щелчка по тексту.

\t var img = document.getElementById("img"); 
 
\t function playAudio() { 
 
\t \t x = new Audio("sound.mp3"); 
 
\t \t x.play(); 
 
    \t \t img.addEventListener('click',changeAudio(x)); 
 
\t } 
 
\t function changeAudio(x){ 
 
\t \t return function(){ 
 
\t \t \t x.pause(); 
 
\t \t \t x.src = "sound2.mp3"; 
 
\t \t \t x.play(); 
 
\t \t } 
 
\t }

<h1 class="underline-on-hover" onclick="playAudio()" onmouseover="" cursor: pointer;">Test.</h1> 
 
<img onmouseover="" style="cursor: pointer;" id="img" 
 
\t class="img-responsive" src="imagetest.png" alt="Image Test">

источник

2017-02-01 07:53:47

Прошу прощения, если вы имеете в виду, что есть только один звук. в основном это одно и то же. –

Два щелчка differnets (текст и изображение) и воспроизведение звука

ответ

Смежные вопросы