jQuery_jquery를 사용하여 간단한 웹 뮤직 플레이어를 디자인하는 예-JS 튜토리얼-php.cn

jQuery_jquery를 사용하여 간단한 웹 뮤직 플레이어를 디자인하는 예

WBOY

풀어 주다： 2016-05-16 15:11:37

원래의

1328명이 탐색했습니다.

1. 데이터베이스를 준비합니다
먼저 MYSQL 데이터베이스를 다음과 같이 설계합니다.

CREATE TABLE `songs` (
 `song_id` int(11) NOT NULL AUTO_INCREMENT,
 `url` varchar(500) NOT NULL,
 `artist` varchar(250) NOT NULL,
 `title` varchar(250) NOT NULL,
 PRIMARY KEY (`song_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

로그인 후 복사

여기서 url 필드는 mp3 음악의 저장 주소를 나타내고, 아티스트는 노래의 가수, 제목은 노래 이름을 나타냅니다. 다음과 같이 몇 가지 샘플 데이터를 추가해 보겠습니다.

INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/songurl.mp3', 'Artist name', 'Song name');
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/anothersongurl.mp3', 'Another artist', 'Another song');
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/onemoresongurl.mp3', 'One more artist', 'One more song');

로그인 후 복사

2. HTML 페이지 디자인
데이터베이스 디자인이 완료되면 HTML 페이지 디자인을 시작할 수 있습니다. 여기에서는 먼저 jQuery용 음악 재생 플러그인인 jPlayer(http://jplayer.org/)를 다운로드해야 합니다. 다운로드한 패키지의 압축을 푼 후 js 및 스킨 폴더의 내용을 애플리케이션의 루트 디렉터리에 넣으세요. 사용할 자바스크립트 파일과 CSS 스타일 애플리케이션 파일입니다. 이제 HTML 페이지 디자인을 시작할 수 있습니다. 파일 이름을 데모.html로 지정하면 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
  <title>Online radio using jQuery</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
</head>

<body>
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-audio">
      <div class="jp-type-single">
        <div id="jp_interface_1" class="jp-interface">
          <ul class="jp-controls">
            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
          </ul>

          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>

          <div class="jp-volume-bar">
            <div class="jp-volume-bar-value"></div>
          </div>

          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
        </div>

        <div id="jp_playlist_1" class="jp-playlist">
          <ul>
            <li><strong id="artist">Artist</strong> - <span id="songname">Song name</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

로그인 후 복사

위의 코드는 실제로 매우 간단합니다. jQuery 및 jPlayer 플러그인에 필요한 파일과 스타일을 소개한 다음 플레이어의 모양을 설정합니다. 여기서는 DIV를 사용하여 지정된 레이어를 사전 배치합니다. 재생 진행률 표시줄(시작/일시 중지), 사운드 조절 볼륨 등

3. 데이터베이스의 트랙을 읽어보세요
다음으로 데이터베이스에서 재생할 노래를 읽을 수 있습니다. 이 기사에서는 ezSQL의 PHP 오픈 소스 라이브러리를 사용하여 데이터베이스에 연결합니다. 물론 전통적인 MYSQL 연결 방법을 사용할 수도 있습니다. ezSQL의 구체적인 사용법은 자세히 소개하지 않겠습니다. 실제로 사용법은 매우 간단합니다. ez_sql_core.php와 ez_sql_mysql.php 두 파일을 프로젝트의 루트 디렉토리에 다음과 같이 작성합니다. 이름을 getsong.php로 지정하면 코드는 다음과 같습니다.

<&#63;php

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){ 

  include_once "ez_sql_core.php";
  include_once "ez_sql_mysql.php";
  $db = new ezSQL_mysql('db_user','db_password','db_name','db_host'); 

  $song = $db->get_row("SELECT * FROM songs ORDER BY RAND() LIMIT 1");

  $artist = $song->artist;
  $songname = $song->title;
  $url = $song->url;
  $separator = '|';
  echo $url.$separator.$artist.$separator.$songname;
} 

&#63;>

로그인 후 복사

여기서는 rand()를 이용하여 MYSQL에서 무작위로 레코드(트랙)를 가져온 후, 변수를 이용하여 곡명, 가수명, 주소를 저장하고 "| ". 그리고 이 PHP를 호출하려면 ajax를 사용해야 하기 때문에 다음 문장에 주의하세요.
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
주요 목적은 사용자가 브라우저 주소 표시줄에 http://www.yousite.com/getsong.php를 입력하여 노래의 URL 주소를 얻는 것을 방지하는 것입니다. AJAX를 통해 전송된 요청만 허용됩니다.
4. 코드 마무리 및 개선
마지막으로 jPlayer 코드를 수정하여 플레이어를 실행할 수 있습니다. 다음과 같이 데모.html 코드를 수정합니다.

　　<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      var data = $.ajax({
       url: "getsong.php",
       async: false
       }).responseText;

      var string = data.split('|');
      $(this).jPlayer("setMedia", {
        mp3: string[0]
      }).jPlayer("play");

      $('#artist').html(string[1]);
      $('#songname').html(string[2]);
    },
    ended: function (event) {
      var data = $.ajax({
       url: "getsong.php",
       async: false
       }).responseText;

      var string = data.split('|');
      $(this).jPlayer("setMedia", {
        mp3: string[0]
      }).jPlayer("play");

      $('#artist').html(string[1]);
      $('#songname').html(string[2]);
    },
    swfPath: "js",
    supplied: "mp3"
  });
});
//]]>
</script>

로그인 후 복사

jPlayer 플러그인의 Ready 메소드에서 ajax 요청이 시작되어 getsong.php를 요청하고 재생된 노래를 무작위로 가져온 다음 분할 메소드를 재사용하여 "|"를 분할하는 것을 볼 수 있습니다. 반환된 데이터의 기호입니다. 결과 문자열 배열 string[0]은 mp3 노래의 URL 주소이고, stringp[1]은 가수의 이름이며 여기에 전달됩니다.
$('#artist').html(string[1]) 이 표시되고, $('#songname').html(string[2]) 이 표시됩니다. swfPath는 플레이어의 FLASH가 있는 디렉터리를 js 디렉터리로 지정합니다. 물론 MP3 형식만 지원된다는 점을 명시했습니다.
실행 후 다음과 같은 플레이어 효과를 볼 수 있습니다.

201638165806293.jpg (434×126)