audio on / off with javascript

Question

audio on / off with javascript

Navigation

#1 by (1 votes)

0

I have the following codes:

#headset {
    width: 500px;
    height: 500px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("https://image.ibb.co/bMKXrR/Zeichenfl_che_2_gr_n.png");
   
}

#headset:hover {
    background-image: url("https://image.ibb.co/gDzXrR/Zeichenfl_che_4.png");
}

  <div id="headset"></div>

<audio autoplay loop id="music-ebene2-background">
    <source src="https://d1490khl9dq1ow.cloudfront.net/music/mp3preview/fun-guitar-and-ukulele-full_fk4ltN4O.mp3" type="audio/mpeg">
</audio>

And I need a function that makes when I pulse, the music is turned off or on. The question is that I work in a doc. full .js because it is a very big project and I need that more sounds that are cut at the same time can be added to it later.

I have found this;

var vid = document.getElementById("video1");
vid.muted = true;

I think that's fine, but I do not know how to carry it out. Can someone help me out?

Thanks

Edited.

Well, I have achieved it with patience after an hour ... now my problem is to add a oneclick event that makes when I press pause change the image and when I pulse again it changes again. What I have so far is the following:

var audio = document.getElementById('music-ebene2-background');

document.getElementById('headset').addEventListener('click', function (e)
{
    e = e || window.event;
    audio.muted = !audio.muted;
    e.preventDefault();
}, false);

#headset {
    width: 500px;
    height: 500px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("https://image.ibb.co/bMKXrR/Zeichenfl_che_2_gr_n.png");
   
}

#headset:hover {
    background-image: url("https://image.ibb.co/gDzXrR/Zeichenfl_che_4.png");
}

<div id="headset"></div>

<audio autoplay loop id="music-ebene2-background">
    <source src="https://d1490khl9dq1ow.cloudfront.net/music/mp3preview/fun-guitar-and-ukulele-full_fk4ltN4O.mp3" type="audio/mpeg">
</audio>

At the moment I have that hover, but that goes away and I want to use the hover link in the oneclick event

javascript html css

asked by Dario B. 18.10.2017 в 12:35

source

1 answer

Add SSL Certificate from a domain to a subdomain Error Can not resolve symbol 'EventoOnItemClick'

score 1 · Accepted Answer

To generate that kind of switch that you ask for in your image, I would do the following:

var audio = document.getElementById('music-ebene2-background');

document.getElementById('headset').addEventListener('click', function (e)
{
    e = e || window.event;
    audio.muted = !audio.muted;

    if(audio.muted){
        document.getElementById('headset').setAttribute('class', 'active_headset');
    }else{
        document.getElementById('headset').removeAttribute("class");
    }
    e.preventDefault();
}, false);

#headset {
    width: 500px;
    height: 500px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("https://image.ibb.co/bMKXrR/Zeichenfl_che_2_gr_n.png");
   
}

.active_headset{
    background-image: url("https://image.ibb.co/gDzXrR/Zeichenfl_che_4.png") !important;
}

<div id="headset"></div>

<audio autoplay loop id="music-ebene2-background">
    <source src="https://d1490khl9dq1ow.cloudfront.net/music/mp3preview/fun-guitar-and-ukulele-full_fk4ltN4O.mp3" type="audio/mpeg">
</audio>