JavaScript Kodlanan sitede müziğin sesi ayarlanmıyor

arda.nb01 dedi:

Sitede ses seviyesini ayarlamak için bir kod yazdım ama çalışmıyor maalesef.

JavaScript:Panoya kopyala

const arrowBtns = document.querySelectorAll('.arrow-btn');
const cardBtns = document.querySelectorAll('.card');
let currentCard = 2;
let dir = 1;
moveCards();

const applyPointerEffect = (btn, ease, shadow) => {
 btn.onpointerenter = () => gsap.to(btn, { ease, 'box-shadow': shadow });
 btn.onpointerleave = () => gsap.to(btn, { ease, 'box-shadow': '0 6px 8px #00000030' });
};

arrowBtns.forEach((btn, i) => {
 applyPointerEffect(btn, 'expo', '0 3px 4px #00000050');
 btn.onclick = () => {
 dir = (i == 0) ? 1 : -1;
 currentCard += (i === 0) ? -1 : 1;
 currentCard = Math.min(4, Math.max(0, currentCard));
 moveCards(0.75);
 };
});

cardBtns.forEach((btn, i) => {
 applyPointerEffect(btn, 'power3', () => (i === currentCard) ? '0 6px 11px #00000030' : '0 0px 0px #00000030');
 btn.onclick = () => {
 dir = (i < currentCard) ? 1 : -1;
 currentCard = i;
 moveCards(0.75);
 };
});

function moveCards(dur = 0) {
 gsap.timeline({ defaults: { duration: dur, ease: 'power3', stagger: { each: -0.03 * dir } } })
 .to('.card', {
 x: -270 * currentCard,
 y: (i) => (i === currentCard) ? 0 : 15,
 height: (i) => (i === currentCard) ? 270 : 240,
 ease: 'elastic.out(0.4)'
 }, 0)
 .to('.card', {
 cursor: (i) => (i === currentCard) ? 'default' : 'pointer',
 'box-shadow': (i) => (i === currentCard) ? '0 6px 11px #00000030' : '0 0px 0px #00000030',
 border: (i) => (i === currentCard) ? '2px solid #26a' : '0px solid #fff',
 background: (i) => (i === currentCard) ? 'radial-gradient(100% 100% at top, #fff 0%, #fff 99%)' : 'radial-gradient(100% 100% at top, #fff 20%, #eee 175%)',
 ease: 'expo'.
 }, 0)
 .to('.icon svg', {
 attr: {
 stroke: (i) => (i === currentCard) ? 'transparent' : '#36a',
 fill: (i) => (i === currentCard) ? '#36a' : 'transparent'.
 }
 }, 0)
 .to('.arrow-btn-prev, .arrow-btn-next', {
 autoAlpha: (i) => (i === 0 && currentCard === 0) || (i === 1 && currentCard === 4) ? 0 : 1
 }, 0)
 .to('.card h4', {
 y: (i) => (i === currentCard) ? 0 : 8,
 opacity: (i) => (i === currentCard) ? 1 : 0,
 }, 0);
}

function showThanks() {
 document.getElementById("yes-button").disabled = true;
 document.getElementById("no-button").style.display = "none";
 alert("bende seni seviyorum yavrumm😍😘");
}

document.addEventListener('DOMContentLoaded', function() {
 // Öğeleri başlangıçta gizle.
 var slider = document.querySelector('.slider');
 var cardsWrapper = document.querySelector('.cards-wrapper');
 var seviyor = document.querySelector('.seviyor');
 var ortakvideo = document.querySelector('.ortakvideo');

 slider.style.display = 'none';
 cardsWrapper.style.display = 'none';
 seviyor.style.display = 'none';
 ortakvideo.style.display = 'none';

 // Input elementini ve audio dosyasını tanımla.
 var input = document.getElementById('name');
 var audio = new Audio('Mustafa Sandal - Gel Bana.mp3');

 // Enter tuşuna basıldığında çalışacak fonksiyon.
 input.addEventListener('keydown', function(event) {
 if(event.key === 'Enter') {
 if(input.value === 'çoçuk adam') {
 // Öğeleri göster ve müziği çal.
 slider.style.display = 'block';
 cardsWrapper.style.display = 'flex';
 seviyor.style.display = 'block';
 ortakvideo.style.display = 'block';

 audio.play();
 } else {
 // Uyarı mesajı göster.

 // Öğeleri tekrar gizle.
 slider.style.display = 'none';
 cardsWrapper.style.display = 'none';
 seviyor.style.display = 'none';
 }
 }
 });
});

document.addEventListener('DOMContentLoaded', function() {
 // Öğeleri başlangıçta gizle.
 var slider = document.querySelector('.slider');
 var cardsWrapper = document.querySelector('.cards-wrapper');
 var seviyor = document.querySelector('.seviyor');
 var ortakvideo = document.querySelector('.ortakvideo');

 var input = document.getElementById('name');
 var audio = new Audio('Mustafa Sandal - Gel Bana.mp3');

 // Enter tuşuna basıldığında çalışacak fonksiyon.
 input.addEventListener('keydown', function(event) {
 if(event.key === 'Enter') {
 if(input.value === 'çoçuk adam') {
 // İstenen öğeleri göster ve müziği çal.
 slider.style.display = 'block';
 cardsWrapper.style.display = 'flex';
 seviyor.style.display = 'block';
 ortakvideo.style.display = 'block';

 audio.play();
 // Input alanını ve diğer içerikleri gizle.
 input.style.display = 'none';
 document.body.childNodes.forEach(function(node) {
 if(node.nodeType === Node.ELEMENT_NODE && node !== slider && node !== cardsWrapper && node !== seviyor && node !== ortakvideo) {
 node.style.display = 'none';
 }
 });
 } else {
 // Uyarı mesajı göster.
 alert('aşkolsun bumu benim lakabım🥺');
 }
 }
 });
});

// Ses seviyesi kaydırıcısını ve audio elementini seç.
var volumeControl = document.getElementById('volumeControl');
var backgroundMusic = document.getElementById('siteMuzik');

// Kaydırıcı değeri değiştiğinde ses seviyesini ayarla.
volumeControl.addEventListener('input', function() {
 backgroundMusic.volume = this.value;
});

// Sayfa yüklendiğinde müziği başlat ve ses seviyesini kaydırıcının değerine ayarla.
document.addEventListener('DOMContentLoaded', function() {
 backgroundMusic.play();
 backgroundMusic.volume = volumeControl.value;
});

Yardım eder misiniz?

Genişletmek için tıkla...

plamglotis dedi:

Merhaba hocam öncelikle müzik ataması yanlış müziği web tabanlı atamanız lazım örnek olarak “http://media.w3.org/2010/05/sound/sound_90.mp3”. Eğer bu şekilde de çalışmazsa HTML üzerinden ses ataması yapın.

Genişletmek için tıkla...

!-- Ses seviyesi kaydırıcısı -->
<label for="volumeControl">Ses Seviyesi: </label>
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="0.7" />

<!-- Audio elementi -->
<audio id="siteMuzik" src="Mustafa Sandal - Gel Bana.mp3"></audio>

arda.nb01 dedi:

HTML:Panoya kopyala

!-- Ses seviyesi kaydırıcısı -->
<label for="volumeControl">Ses Seviyesi: </label>
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="0.7" />

<!-- Audio elementi -->
<audio id="siteMuzik" src="Mustafa Sandal - Gel Bana.mp3"></audio>

Böyle bir kodum var zaten.

Genişletmek için tıkla...

plamglotis dedi:

<Audio controls=“controls” src=“müziğin. MP3”></audio> bu kodu dene.

Genişletmek için tıkla...

arda.nb01 dedi:

HTML:Panoya kopyala

!-- Ses seviyesi kaydırıcısı -->
<label for="volumeControl">Ses Seviyesi: </label>
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="0.7" />

<!-- Audio elementi -->
<audio id="siteMuzik" src="Mustafa Sandal - Gel Bana.mp3"></audio>

Böyle bir kodum var zaten.

Genişletmek için tıkla...

arda.nb01 dedi:

JavaScript:Panoya kopyala

// Sayfa yüklendiğinde müziği başlat ve ses seviyesini kaydırıcının değerine ayarla.
document.addEventListener('DOMContentLoaded', function() {
 backgroundMusic.play();
 backgroundMusic.volume = volumeControl.value;
});

Genişletmek için tıkla...

arda.nb01 dedi:

JavaScript:Panoya kopyala

document.addEventListener('DOMContentLoaded', function() {
 // Öğeleri başlangıçta gizle.
 var slider = document.querySelector('.slider');
 var cardsWrapper = document.querySelector('.cards-wrapper');
 var seviyor = document.querySelector('.seviyor');
 var ortakvideo = document.querySelector('.ortakvideo');

 var input = document.getElementById('name');
 var audio = new Audio('Mustafa Sandal - Gel Bana.mp3');

 // Enter tuşuna basıldığında çalışacak fonksiyon.
 input.addEventListener('keydown', function(event) {
 if(event.key === 'Enter') {
 if(input.value === 'çoçuk adam') {
 // İstenen öğeleri göster ve müziği çal.
 slider.style.display = 'block';
 cardsWrapper.style.display = 'flex';
 seviyor.style.display = 'block';
 ortakvideo.style.display = 'block';

 audio.play();
 // Input alanını ve diğer içerikleri gizle.
 input.style.display = 'none';
 document.body.childNodes.forEach(function(node) {
 if(node.nodeType === Node.ELEMENT_NODE && node !== slider && node !== cardsWrapper && node !== seviyor && node !== ortakvideo) {
 node.style.display = 'none';
 }
 });
 } else {
 // Uyarı mesajı göster.
 alert('aşkolsun bumu benim lakabım🥺');
 }
 }
 });
});

Genişletmek için tıkla...

arda.nb01 dedi:

Sitede ses seviyesini ayarlamak için bir kod yazdım ama çalışmıyor maalesef.

Genişletmek için tıkla...

backgroundMusic.volume = this.value / 100;

brkdnmz dedi:

Bu kodunuzu görmemişim, kusura bakmayın. En aşağıda yazdıklarımı o yüzden yazmıştım.

Burada backgroundMusic.play(); eğer Chrome kullanıyorsanız hata veriyor -tahminen diğer tarayıcılarda da verir- çünkü öncelikle kullanıcının sayfayla etkileşime geçmesi -en azından bir yere basması falan- bekleniyor. Konsolu açarak hatayı görebilirsiniz. Sayfa yüklendiği an oynatmaya çalıştığı için kullanıcının etkileşime geçmesini beklemiyor.

Burada, sayfadaki asıl audio elementinden farklı yeni bir element oluşturup (new Audio(...)) onu oynatıyorsunuz. Bunun ses seviyesini slider değiştiremeyecektir çünkü Event listenerın atandığı element, sayfada oluşturduğunuz diğer element.

---

Slider'ınızın menzili [0, 100] ise şöyle yazmanız gerekiyor:

JavaScript:Panoya kopyala

backgroundMusic.volume = this.value / 100;

audio.volume'un değeri [0, 1] aralığında olmalı. Tabii ki 0 sessiz ve 1 en yükses sese denk geliyor.

backgroundMusic.volume'u ayarladığınız birden fazla yer var, ona dikkat edin.

Genişletmek için tıkla...

arda.nb01 dedi:

JavaScript:Panoya kopyala

var audio = new Audio('Mustafa Sandal - Gel Bana.mp3');

Genişletmek için tıkla...

arda.nb01 dedi:

JavaScript:Panoya kopyala

var backgroundMusic = document.getElementById('siteMuzik');

Genişletmek için tıkla...