HTML, CSS dan jQuery: Buat pemain muzik yang dimainkan secara automatik-tutorial js-php.cn

HTML, CSS dan jQuery: Buat pemain muzik yang dimainkan secara automatik

王林

Lepaskan： 2023-10-25 11:33:11

asal

1036 orang telah melayarinya

HTML, CSS dan jQuery: Buat pemain muzik yang dimainkan secara automatik

Pemain muzik ialah salah satu elemen biasa dalam reka bentuk web moden . Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta pemain muzik yang dimainkan secara automatik dan memberikan contoh kod khusus.

Pertama, buat bekas yang mengandungi pemain muzik dalam fail HTML:

<div class="music-player">
   <audio id="myAudio">
      <source src="music.mp3" type="audio/mpeg">
   </audio>
   <button id="playButton">播放</button>
   <button id="pauseButton">暂停</button>
</div>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan tag <audio></code > mencipta pemain audio dan menetapkan atribut <code>src kepada URL fail muzik. Seterusnya, kami menambah dua butang, satu untuk memainkan muzik dan satu lagi untuk menjedanya. <audio>标签创建一个音频播放器，并设置src属性为音乐文件的URL。接下来，我们添加了两个按钮，一个用于播放音乐，另一个用于暂停音乐。

接下来，我们需要使用CSS样式来美化音乐播放器：

.music-player {
   text-align: center;
}

button {
   padding: 10px 20px;
   background: #333;
   color: #fff;
   border: none;
   border-radius: 5px;
   margin: 10px;
   cursor: pointer;
}

Salin selepas log masuk

以上CSS样式将音乐播放器容器居中对齐，并设置了按钮的背景色、文字颜色等样式属性。

现在，我们使用jQuery来实现音乐播放器的功能：

$(document).ready(function(){
   var audio = document.getElementById("myAudio");

   $("#playButton").click(function(){
      audio.play();
   });

   $("#pauseButton").click(function(){
      audio.pause();
   });
});

Salin selepas log masuk

在上面的JavaScript代码中，我们使用document.getElementById()方法获取音频元素，并将其赋值给一个变量。然后，我们通过点击按钮来触发音频的播放和暂停功能。

最后，我们将上述HTML、CSS和jQuery代码放在一个HTML文件中，并引入jQuery库：

<!DOCTYPE html>
<html>
<head>
   <title>自动播放的音乐播放器</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <style>
      /* CSS代码 */
   </style>
</head>
<body>
   <div class="music-player">
      <!-- HTML代码 -->
   </div>
   <script>
      // JavaScript代码
   </script>
</body>
</html>

Salin selepas log masuk

在上述代码中，记得将CSS代码粘贴到<style></style>标签中，将JavaScript代码粘贴到<script></script>

Seterusnya, kita perlu menggunakan gaya CSS untuk mencantikkan pemain muzik:

rrreee

Gaya CSS di atas menyelaraskan bekas pemain muzik dan tetapkan warna latar belakang butang . Warna teks dan atribut gaya lain.

Kini, kami menggunakan jQuery untuk melaksanakan fungsi pemain muzik: #🎜🎜#rrreee#🎜🎜#Dalam kod JavaScript di atas, kami menggunakan document.getElementById()Kaedah mendapatkan elemen audio dan menyerahkannya kepada pembolehubah. Kemudian, kami mencetuskan fungsi main dan jeda audio dengan mengklik butang. #🎜🎜##🎜🎜#Akhir sekali, kami meletakkan kod HTML, CSS dan jQuery di atas dalam fail HTML dan memperkenalkan perpustakaan jQuery: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, ingat untuk menampal kod CSS Pergi ke teg <style></style>, tampal kod JavaScript ke dalam teg <script></script> dan tampalkan kod HTML yang disebut sebelum ini ke dalam bekas pemain muzik. #🎜🎜##🎜🎜#Melalui langkah di atas, kami berjaya mencipta pemain muzik automain yang dibuat menggunakan HTML, CSS dan jQuery. Apabila pengguna mengklik butang main, muzik akan mula dimainkan apabila pengguna mengklik butang jeda, muzik akan berhenti dimainkan. #🎜🎜##🎜🎜# Saya harap artikel ini dapat membantu anda memahami cara mencipta pemain muzik yang dimainkan secara automatik menggunakan HTML, CSS dan jQuery. #🎜🎜#

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Buat pemain muzik yang dimainkan secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!