-4
Мой код Javascript не работает должным образом
var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer() {
audio = new Audio();
audio.src = "nineDays.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
mutebtn = document.getElementById("mutebtn");
// Add Event Handling
playbtn.addEventListener("click", playPause);
mutebtn.addEventListener("click", mute);
// Functions
function playPause() {
if (audio.paused) {
audio.play();
playbtn.style.background = "url(video_pause.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(play.png) no-repeat";
}
}
function mute() {
if (audio.muted) {
audio.muted = false;
mutebtn.style.background = "url(speaker.png) no-repeat";
} else {
audio.muted = true;
mutebtn.style.background = "url(mute.png) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);body {
background: #282828;
color: white;
font-family: sans-serif;
}
.nav {
display: flex;
justify-content: flex-end;
position: absolute;
width: 100%;
top: 0;
left: 0;
list-style-type: none;
}
li a {
color: white;
text-decoration: none;
padding: 0 10px;
}
h1 {
font-size: 13px;
margin-bottom: 80%;
margin-right: 50%;
font-family: 'Montserrat';
}
.container {
padding-top: 8%;
}
button {
border: none;
cursor: pointer;
outline: none;
}
button#playpausebtn {
background: url(video_pause.png) center center no-repeat;
background-size: cover;
margin-left: 20px;
marging-top: 35px;
width: 20px;
height: 15px;
}
button#mutebtn {
background: url(speaker.png) center center no-repeat;
background-size: cover;
margin-top: 35px;
width: 25px;
height: 20px;
}
.soundNav {
position: absolute;
width: 20%;
height: 30px;
z-index: 99999;
}<body>
<div class="soundNav">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
</div>
<ul class="nav nav-tabs">
<li role="presentation"><a href="Final%20project.html">Home</a>
</li>
<li role="presentation"><a href="page2.html">About me</a>
</li>
<li role="presentation" class="active"><a href="page3.html">Work</a>
</li>
<li role="presentation"><a href="contactme.html">Get In Touch</a>
</li>
</ul>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!--Indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
<li data-target="#my-slider" data-slide-to="3"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> © Ed Sheeran Concert at Blossom Center</br>
August 2015
</h1>
</div>
</div>
<div class="item">
<img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item">
<img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item ">
<img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </h1>
</div>
</div>
<!--controls or next and prev buttons-->
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Я пытаюсь понять, в чем проблема, когда кто-то это- открывает страницу, начинается музыка. Я хочу, чтобы пользователь мог приостановить или отключить музыку, когда захочет. И это прекрасно работает, за исключением того, что мои иконы не будут отображаться, так как они скрыты. Все находится в одной папке. Я думал использовать глификоны, но я не знаю, как их использовать внутри javascript.
Вы не используете glyphicons «внутри JavaScript». Вы показываете их, как правило, с помощью класса CSS. Вы посмотрели на свою консоль (нажмите F12) для каких-либо ошибок? –
http://stacksnippets.net/speaker.png, 404 не найдено. То же самое с другими изображениями – Morpheus
Я смотрел в консоли и ошибок не было. – Catalina