<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
<link rel="stylesheet" href="style_muzik.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container">
<div class="ust">
<ul>
<li><a href="iletisim.html">İletişim</a><a href="muzik.html">Müzik</a><a href="yayinlar.html">Yayınlar</a><a href="bio.html">Özgeçmiş</a><a href="index.html">Ana Sayfa</a></li>
</ul>
</div>
<div class="sablon">
<div class="nokturn"></div><a href="https://tinyurl.com/bdh8hdcw">
<div class="amazon"></div>
</a>
<div class="sol">
<table class>
<colgroup>
<col>
<col>
</colgroup>
<thread>
<tr>
<th></th>
<th></th>
</tr>
</thread>
<tbody>
<td>Noktürn No.1 B-flat Major</td>
<td><audio id="audio" src="muzik/n1.mp3" controls></audio></td>
</tr>
<tr>
<td>Noktürn No.2 A Major</td>
<td><audio id="audio" src="muzik/n2.mp3" controls></audio></td>
</tr>
<td>Noktürn No.3 C minor</td>
<td><audio id="audio" src="muzik/n3.mp3" controls></audio></td>
</tr>
<td>Noktürn No.4 B-flat minor</td>
<td><audio id="audio" src="muzik/n4.mp3" controls></audio></td>
</tr>
<td>Noktürn No.5 B minor</td>
<td><audio id="audio" src="muzik/n5.mp3" controls></audio></td>
</tr>
</tr>
</tbody>
</table>
</div>
<div class="sag"><iframe width="560" height="315" src="https://www.youtube.com/embed/gwBjaDGy-gA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
</div>
<div class="footer">
<p>© 2023 All rights reserved. / Tüm hakları saklıdır.</p>
</div>
</body>
<script>
$("audio").on("play", function() {
$("audio").not(this).each(function(index, audio) {
audio.pause();
});
});
</script>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$("audio").on("play", function() {
$("audio").not(this).each(function(index, audio) {
audio.pause();
});
});
</script>
yfana jQuery tanıtman gerekecek.
Çok teşekkürler. Yazılımcı değilim, hobi olarak kendi kendime öğrendiğimden sanırım bu dediğinizi yapamam. Bilgimi aşıyor. Çok teşekkür ederim yine dejQuery ile yapabilirsin, bunun için önce html sayfana jQuery tanıtman gerekecek.
head etiketi içerisine :
HTML:<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> $("audio").on("play", function() { $("audio").not(this).each(function(index, audio) { audio.pause(); }); }); </script>
Bu şekilde çalışıyor olması gerek.
Bütün kodlarını buraya eklersen, sana çalışır halini atarım sen de eskisini silip benim yazdığım yeni kodları yapıştırırsan istediğin şeyi yapmış olursunÇok teşekkürler. Yazılımcı değilim, hobi olarak kendi kendime öğrendiğimden sanırım bu dediğinizi yapamam. Bilgimi aşıyor. Çok teşekkür ederim yine de
Süper olur, çok teşekkürlerBütün kodlarını buraya eklersen, sana çalışır halini atarım sen de eskisini silip benim yazdığım yeni kodları yapıştırırsan istediğin şeyi yapmış olursun
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
<link rel="stylesheet" href="style_muzik.css"/>
</head>
<body>
<div class="container">
<div class="ust">
<ul>
<li>
<a href="iletisim.html">İletişim</a>
<a href="muzik.html">Müzik</a>
<a href="yayinlar.html">Yayınlar</a>
<a href="bio.html">Özgeçmiş</a>
<a href="index.html">Ana Sayfa</a></li>
</ul>
</div>
<div class="sablon">
<div class="nokturn"></div>
<a href="Piyano İçin 5 Noktürn : H. Ozan Demirtaş: Amazon.com.tr: Kitap"><div class="amazon"></div></a>
<div class="sol">
<table class>
<colgroup>
<col>
<col>
</colgroup>
<thread>
<tr>
<th></th>
<th></th>
</tr>
</thread>
<tbody>
<td>Noktürn No.1 B-flat Major</td>
<td> <audio id="audio" src="muzik/n1.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
<tr>
<td>Noktürn No.2 A Major</td>
<td> <audio id="audio" src="muzik/n2.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
<td>Noktürn No.3 C minor</td>
<td> <audio id="audio" src="muzik/n3.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
<td>Noktürn No.4 B-flat minor</td>
<td> <audio id="audio" src="muzik/n4.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
<td>Noktürn No.5 B minor</td>
<td> <audio id="audio" src="muzik/n5.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
</tr>
</tbody>
</table>
</div>
<div class="sag">
<iframe width="560" height="315" src="[MEDIA=youtube]gwBjaDGy-gA[/MEDIA]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="footer"><p>© 2023 All rights reserved. / Tüm hakları saklıdır.</p></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
<link rel="stylesheet" href="style_muzik.css"/>
</head>
<body>
<div class="container">
<div class="ust">
<ul>
<li>
<a href="iletisim.html">İletişim</a>
<a href="muzik.html">Müzik</a>
<a href="yayinlar.html">Yayınlar</a>
<a href="bio.html">Özgeçmiş</a>
<a href="index.html">Ana Sayfa</a></li>
</ul>
</div>
<div class="sablon">
<div class="nokturn"></div>
<a href="Piyano İçin 5 Noktürn : H. Ozan Demirtaş: Amazon.com.tr: Kitap"><div class="amazon"></div></a>
<div class="sol">
<table class>
<colgroup>
<col>
<col>
</colgroup>
<thread>
<tr>
<th></th>
<th></th>
</tr>
</thread>
<tbody>
<td>Noktürn No.1 B-flat Major</td>
<td> <audio id="audio" src="muzik/n1.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
<tr>
<td>Noktürn No.2 A Major</td>
<td> <audio id="audio" src="muzik/n2.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
<td>Noktürn No.3 C minor</td>
<td> <audio id="audio" src="muzik/n3.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
<td>Noktürn No.4 B-flat minor</td>
<td> <audio id="audio" src="muzik/n4.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
<td>Noktürn No.5 B minor</td>
<td> <audio id="audio" src="muzik/n5.mp3" controls >
</audio>
<script>
var ses = document.getElementById("audio");
var liste = document.querySelectorAll("#liste li");
var index =liste.length;
liste[0].style.color="blue";
y=0;
[].forEach.call(liste , function(el,i) {
el.onclick=function(){
for(var j=0; j<=index-1; j++){
liste[j].style.color="";
}
el.style.color="blue";
// liste[i-1].style.color="";
var x= el.getAttribute("data-src");
ses.src=x;
y=i;
}
});
ses.addEventListener("ended", function(){
y++;
if(index==y){
y=0;
liste[index-1].style.color="";
}
if(y==0){}else
liste[y-1].style.color="";
liste[y].style.color="blue";
ad = liste[y].getAttribute("data-src");
ses.src=ad;
});
</script></td>
</tr>
</tr>
</tbody>
</table>
</div>
<div class="sag">
<iframe width="560" height="315" src="[MEDIA=youtube]gwBjaDGy-gA[/MEDIA]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="footer"><p>© 2023 All rights reserved. / Tüm hakları saklıdır.</p></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
<link rel="stylesheet" href="style_muzik.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container">
<div class="ust">
<ul>
<li><a href="iletisim.html">İletişim</a><a href="muzik.html">Müzik</a><a href="yayinlar.html">Yayınlar</a><a href="bio.html">Özgeçmiş</a><a href="index.html">Ana Sayfa</a></li>
</ul>
</div>
<div class="sablon">
<div class="nokturn"></div><a href="https://tinyurl.com/bdh8hdcw">
<div class="amazon"></div>
</a>
<div class="sol">
<table class>
<colgroup>
<col>
<col>
</colgroup>
<thread>
<tr>
<th></th>
<th></th>
</tr>
</thread>
<tbody>
<td>Noktürn No.1 B-flat Major</td>
<td><audio id="audio" src="muzik/n1.mp3" controls></audio></td>
</tr>
<tr>
<td>Noktürn No.2 A Major</td>
<td><audio id="audio" src="muzik/n2.mp3" controls></audio></td>
</tr>
<td>Noktürn No.3 C minor</td>
<td><audio id="audio" src="muzik/n3.mp3" controls></audio></td>
</tr>
<td>Noktürn No.4 B-flat minor</td>
<td><audio id="audio" src="muzik/n4.mp3" controls></audio></td>
</tr>
<td>Noktürn No.5 B minor</td>
<td><audio id="audio" src="muzik/n5.mp3" controls></audio></td>
</tr>
</tr>
</tbody>
</table>
</div>
<div class="sag"><iframe width="560" height="315" src="https://www.youtube.com/embed/gwBjaDGy-gA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
</div>
<div class="footer">
<p>© 2023 All rights reserved. / Tüm hakları saklıdır.</p>
</div>
</body>
<script>
$("audio").on("play", function() {
$("audio").not(this).each(function(index, audio) {
audio.pause();
});
});
</script>
</html>
Evet, çalıştıBiraz düzenlemeye de çalıştım ama kontrol edip dönersiniz çalışıp çalışmadığını
HTML:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Başlıksız Belge</title> <link rel="stylesheet" href="style_muzik.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div class="container"> <div class="ust"> <ul> <li><a href="iletisim.html">İletişim</a><a href="muzik.html">Müzik</a><a href="yayinlar.html">Yayınlar</a><a href="bio.html">Özgeçmiş</a><a href="index.html">Ana Sayfa</a></li> </ul> </div> <div class="sablon"> <div class="nokturn"></div><a href="https://tinyurl.com/bdh8hdcw"> <div class="amazon"></div> </a> <div class="sol"> <table class> <colgroup> <col> <col> </colgroup> <thread> <tr> <th></th> <th></th> </tr> </thread> <tbody> <td>Noktürn No.1 B-flat Major</td> <td><audio id="audio" src="muzik/n1.mp3" controls></audio></td> </tr> <tr> <td>Noktürn No.2 A Major</td> <td><audio id="audio" src="muzik/n2.mp3" controls></audio></td> </tr> <td>Noktürn No.3 C minor</td> <td><audio id="audio" src="muzik/n3.mp3" controls></audio></td> </tr> <td>Noktürn No.4 B-flat minor</td> <td><audio id="audio" src="muzik/n4.mp3" controls></audio></td> </tr> <td>Noktürn No.5 B minor</td> <td><audio id="audio" src="muzik/n5.mp3" controls></audio></td> </tr> </tr> </tbody> </table> </div> <div class="sag"><iframe width="560" height="315" src="https://www.youtube.com/embed/gwBjaDGy-gA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div> </div> </div> <div class="footer"> <p>© 2023 All rights reserved. / Tüm hakları saklıdır.</p> </div> </body> <script> $("audio").on("play", function() { $("audio").not(this).each(function(index, audio) { audio.pause(); }); }); </script> </html>
HTML’i sadece iskelet düşünün, CSS iskeletin görüntüsünü, JavaScript’de iskeletin hareketlerini temsil eder. Yani sadece HTML yeterli değil. Js de öğrenmelisiniz.Evet, çalıştı
Çok teşekkür ederim.
Bu tarz şeyleri öğrenmek için Jquery, Javascript mi öğrenmek gerekiyor, yoksa HTML yeterli olur mu?
Ücretli danışmanlık veriyor musunuz?
nuya adımı etiketlerseniz
Anladım. Teşekkür ederimHTML’i sadece iskelet düşünün, CSS iskeletin görüntüsünü, JavaScript’de iskeletin hareketlerini temsil eder. Yani sadece HTML yeterli değil. Js de öğrenmelisiniz.
Öyle bir hizmet vermiyorum maalesef, takıldığınız yerlerde konuya adımı etiketlerseniz müsait oldukça cevap verebilirim.