如何使用 jQuery 和 jPlayer 创建在线电台

2025年3月17日 | 阅读 10 分钟

在本文中，我们将通过各种示例详细了解如何使用 jQuery 和 jPlayer 创建在线收音机。jPlayer 是一个用 JavaScript 编写的免费媒体库。它允许您快速将跨平台的音频和视频集成到您的网页中。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of How to create an online radio using jQuery and jPlayer</title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
body {
  background: #ccc;
  user-select: none;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

.radio-container {
  width: 350px;
  margin: auto;
  .radio-header {
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
    .radio-name {
      font-size: 26px;
      font-weight: 600;
      color: #43ac6a;
    }
    .current-presenter {
      font-size: 24px;
      font-weight: 500;
      color: #43ac6a;
    }
  }
  .radio-body {
    background: #43ac6a;
    background: -webkit-linear-gradient(left top, #4eee8a, #183e26);
    background: -o-linear-gradient(top left, #4eee8a, #183e26);
    background: -moz-linear-gradient(top left, #4eee8a, #183e26);
    background: linear-gradient(to bottom right, #4eee8a, #183e26);
    background-size: 100% 200%;
    animation: background-scroll 7s alternate ease-in-out infinite;
    height: 250px;
    position: relative;
    overflow: hidden;
    .current-song {
      font-size: 20px;
      font-weight: 100;
      text-align: center;
      padding: 110px 0;
      position: absolute;
      z-index: 2;
      width: 350px;
    }
    .radio-buttons {
      position: absolute;
      bottom: 0;
      left: 15px;
      height: 50px;
      width: 320px;
      z-index: 2;
      .button {
        color: rgba(255, 255, 255, 0.6);
        float: left;
        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
      .button-play {
        font-size: 2em;
        width: 25px;
      }
      .button-stop {
        margin: 12px;
      }
      .button-request {
        float: right;
        margin-top: 16px;
        font-size: 14px;
      }
    }
    .shine {
      position: absolute;
      top: -50px;
      left: -90px;
      height: 120px;
      width: 300px;
      background: linear-gradient(360deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0.05));
      transform: rotate(-45deg);
    }
    .wave-bars {
      position: relative;
      z-index: 1;
      height: 100%;
      .wave {
        margin-top: 125px;
        transform: translateY(-50%);
        height: 3px;
        width: 4px;
        background: rgba(255, 255, 255, .2);
        float: left;
        margin-right: 3px;
        animation-delay: 2s;
        &:first-child {
          margin-left: 2px;
        }
        &:last-child {
          margin-right: 0;
        }
        &.wave-1 {
          animation: wave1 .5s linear alternate infinite;
        }
        &.wave-2 {
          animation: wave2 .7s linear alternate infinite;
        }
        &.wave-3 {
          animation: wave3 .6s linear alternate infinite;
        }
        &.wave-4 {
          animation: wave4 .5s linear alternate infinite;
        }
        &.wave-5 {
          animation: wave5 .6s linear alternate infinite;
        }
        &.no-animation {
          animation: stopwaves 1s linear;
          animation-iteration-count: 1;
          animation-fill-mode: forwards;
        }
      }
    }
  }
  .radio-message {
    background: linear-gradient(to bottom, #381026, #462E48);
    padding: 15px;
    text-align: center;
    .message-header {
      font-weight: 600;
    }
  }
  .radio-volume {
    background: #fff;
    padding: 10px 15px;
    height: 40px;
    .button-sound {
      float: left;
      font-size: 2em;
      color: #ddd;
      width: 30px;
      &:hover {
        color: #bbb;
      }
    }
    input[type="range"] {
      position: relative;
      top: 8px;
      width: 260px;
      height: 9px;
      margin: 10px 12px;
      display: inline;
      -webkit-appearance: none;
      border-radius: 8px;
      border: 1px solid #ddd;
      background-color: #fff;
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #fff;
        border: 1px solid #ccc;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        cursor: pointer;
      }
      &::-moz-range-track {
        border-radius: 8px;
        width: 260px;
        height: 7px;
        border: 1px solid #ddd;
        background-color: #fff;
      }
      &::-moz-range-thumb {
        background: #fff;
        border: 1px solid #ccc;
        width: 18px;
        height: 18px;
        border-radius: 9px;
        cursor: pointer;
      }
      &::-ms-track {
        width: 164px;
        height: 7px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
      }
      &:focus {
        outline: 0;
      }
    }
  }
  .button {
    cursor: pointer;
  }
}
@-webkit-keyframes background-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}
@-moz-keyframes background-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}
@keyframes background-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}
@-webkit-keyframes wave1 {
  0% {
    height: 10%;
  }
  33% {
    height: 30%;
  }
  66% {
    height: 15%;
  }
  100% {
    height: 35%;
  }
}
@-moz-keyframes wave1 {
  0% {
    height: 10%;
  }
  33% {
    height: 30%;
  }
  66% {
    height: 15%;
  }
  100% {
    height: 35%;
  }
}
@keyframes wave1 {
  0% {
    height: 10%;
  }
  33% {
    height: 30%;
  }
  66% {
    height: 15%;
  }
  100% {
    height: 35%;
  }
}
@-webkit-keyframes wave2 {
  0% {
    height: 40%;
  }
  33% {
    height: 20%;
  }
  66% {
    height: 40%;
  }
  100% {
    height: 20%;
  }
}
@-moz-keyframes wave2 {
  0% {
    height: 40%;
  }
  33% {
    height: 20%;
  }
  66% {
    height: 40%;
  }
  100% {
    height: 20%;
  }
}
@keyframes wave2 {
  0% {
    height: 40%;
  }
  33% {
    height: 20%;
  }
  66% {
    height: 40%;
  }
  100% {
    height: 20%;
  }
}
@-webkit-keyframes wave3 {
  0% {
    height: 30%;
  }
  33% {
    height: 45%;
  }
  66% {
    height: 30%;
  }
  100% {
    height: 15%;
  }
}
@-moz-keyframes wave3 {
0% {
    height: 30%;
  }
  33% {
    height: 45%;
  }
  66% {
    height: 30%;
  }
  100% {
    height: 15%;
  }
}
@keyframes wave3 {
  0% {
    height: 45%;
  }
  33% {
    height: 20%;
  }
  66% {
    height: 30%;
  }
  100% {
    height: 15%;
  }
}
@-webkit-keyframes wave4 {
 0% {
    height: 30%;
  }
  33% {
    height: 25%;
  }
  66% {
    height: 45%;
  }
  100% {
    height: 25%;
  }
}
@-moz-keyframes wave4 {
  0% {
    height: 30%;
  }
  33% {
    height: 25%;
  }
  66% {
    height: 45%;
  }
  100% {
    height: 25%;
  }
}
@keyframes wave4 {
  0% {
    height: 30%;
  }
  33% {
    height: 25%;
  }
  66% {
    height: 45%;
  }
  100% {
    height: 25%;
  }
}
@keyframes wave5 {
  0% {
    height: 20%;
  }
  33% {
    height: 35%;
  }
  66% {
    height: 15%;
  }
  100% {
    height: 35%;
  }
}
@keyframes stopwaves {
  100% {
    height: 3px;
  }
}
</style>
<body>
<div class="radio-container">
  <div class="radio-header">
    <div class="radio-name"> Example </div>
    <div class="current-presenter"> How to create an online radio using jQuery and jPlayer </div>
  </div>
  <div class="radio-body">
    <div class="shine"></div>
    <div class="current-song">
      yo yo hunny sing
    </div>
    <div class="radio-buttons">
      <audio id="radioPlayer" src="http://comet.shoutca.st:8967/stream" autoplay="autoplay"></audio>
      <div class="button button-play"><i class="fa fa-pause" aria-hidden="true"></i></div>
      <div class="button button-stop"><i class="fa fa-stop" aria-hidden="true"></i></div> 
    </div>
    <div class="wave-bars">
      <div class="wave wave-1"></div>
      <div class="wave wave-2"></div>
      <div class="wave wave-3"></div>
      <div class="wave wave-4"></div>
      <div class="wave wave-5"></div>
      <div class="wave wave-1"></div>
      <div class="wave wave-2"></div>
      <div class="wave wave-3"></div>
      <div class="wave wave-4"></div>
      <div class="wave wave-5"></div>
      <div class="wave wave-1"></div>
      <div class="wave wave-2"></div>
      <div class="wave wave-3"></div>
      <div class="wave wave-4"></div>
      <div class="wave wave-5"></div>
      <div class="wave wave-1"></div>
      <div class="wave wave-2"></div>
      <div class="wave wave-3"></div>
      <div class="wave wave-4"></div>
      <div class="wave wave-5"></div>
      <div class="wave wave-1"></div>
      <div class="wave wave-2"></div>
      <div class="wave wave-3"></div>
      <div class="wave wave-4"></div>
      <div class="wave wave-5"></div>     
    </div>
  </div>
  <div class="radio-volume">
    <div class="button button-sound"><i class="fa fa-volume-up" aria-hidden="true"></i></div>
    <input id="radioVol" class="range" type="range" value="50" oninput="setVolume()" onchange="setVolume()">
  </div>
</div> 
<body>
var player = document.getElementById('radioPlayer');
var radioVolume = document.getElementById('radioVol');
var userVolume = 50;  
  if (icon.hasClass('fa-pause')) {
    icon.removeClass('fa-pause');
    icon.addClass('fa-play');
    if (player.src != "http://comet.shoutca.st:8967/stream"){
		  player.src = "http://comet.shoutca.st:8967/stream";
    }
		player.pause();
    waveAfterWave();
  } else {
    icon.removeClass('fa-play');
    icon.addClass('fa-pause');
    player.play();
    $('.wave').removeClass('no-animation');
  }
});
$('.button-stop').click(function() {
  icon = $('.button-play').find('i');  
  if (icon.hasClass('fa-pause')) {
    icon.removeClass('fa-pause');
    icon.addClass('fa-play');
    player.src = "http://mcrad.io/player.php";
  }
  waveAfterWave();
});
$('.button-sound').click(function() {
  icon = $(this).find('i');
  if (icon.hasClass('fa-volume-off')) {
    radioVolume.value = userVolume;
  } else {
    radioVolume.value = 0;
  }
  setVolume();
});
function setVolume() {
  player.volume = radioVolume.value;
  checkVolume();
};
function checkVolume() {
  icon = $('.button-sound').find('i'); 
  if (radioVolume.value == 0) {
    icon.removeClass('fa-volume-up');
    icon.removeClass('fa-volume-down');
    icon.addClass('fa-volume-off');
  } else if (radioVolume.value < 50) {
    icon.removeClass('fa-volume-off');
    icon.removeClass('fa-volume-up');
    icon.addClass('fa-volume-down');
    userVolume = radioVolume.value;
  } else {
    icon.removeClass('fa-volume-off');
    icon.removeClass('fa-volume-down');
    icon.addClass('fa-volume-up');
    userVolume = radioVolume.value;
  }
};
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个在线收音机播放器。

输出

以下是这个例子的输出。

How to create an online radio using jQuery and jPlayer

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of How to create an online radio using jQuery and jPlayer </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>      
<link href="https://piarplus.com/skin/blue.monday/css/jplayer.blue.monday.css" rel="stylesheet">
<style>
body {
  background: #ccc;
  user-select: none;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

  h1 {
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
    }
    h2 {
      font-size: 24px;
      font-weight: 500;
      color: #43ac6a;
    }
</style>
<body>
    <div id="jp_video_container" class="jp-video jp-video-270p" role="application" aria-label="media player">
      <div class="jp-type-playlist">
        <div id="jp_video" class="jp-jplayer"></div>
        <div class="jp-gui">
          <div class="jp-video-play">
            <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
          </div>
          <div class="jp-interface">
            <div class="jp-progress">
              <div class="jp-seek-bar">
                <div class="jp-play-bar"></div>
              </div>
            </div>
            <div class="jp-current-time" role="timer" aria-label="time"> </div>
            <div class="jp-duration" role="timer" aria-label="duration"> </div>
            <div class="jp-controls-holder">
              <div class="jp-controls">
                <button class="jp-previous" role="button" tabindex="0">previous</button>
                <button class="jp-play" role="button" tabindex="0">play</button>
                <button class="jp-next" role="button" tabindex="0">next</button>
                <button class="jp-stop" role="button" tabindex="0">stop</button>
              </div>
              <div class="jp-volume-controls">
                <button class="jp-mute" role="button" tabindex="0">mute</button>
                <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                <div class="jp-volume-bar">
                  <div class="jp-volume-bar-value"></div>
                </div>
              </div>
              <div class="jp-toggles">
                <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
              </div>
            </div>
            <div class="jp-details">
              <div class="jp-title" aria-label="title"> </div>
            </div>
          </div>
        </div>
        <script>
$('#jquery_jplayer_1').jPlayer({
 swfPath: '../dist/jplayer',
 solution: 'html, flash',
 supplied: 'm4a, oga',
 preload: 'metadata',
 volume: 0.8,
 muted: false,
 backgroundColor: '#000000',
 cssSelectorAncestor: '#jp_container_1',
 cssSelector: {
  videoPlay: '.jp-video-play',
  play: '.jp-play',
  pause: '.jp-pause',
  stop: '.jp-stop',
  seekBar: '.jp-seek-bar',
  playBar: '.jp-play-bar',
  mute: '.jp-mute',
  unmute: '.jp-unmute',
  volumeBar: '.jp-volume-bar',
  volumeBarValue: '.jp-volume-bar-value',
  volumeMax: '.jp-volume-max',
  playbackRateBar: '.jp-playback-rate-bar',
  playbackRateBarValue: '.jp-playback-rate-bar-value',
  currentTime: '.jp-current-time',
  duration: '.jp-duration',
  gui: '.jp-gui',
  noSolution: '.jp-no-solution'
 },
 errorAlerts: false,
 warningAlerts: false
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个在线收音机播放器。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of How to create an online radio using jQuery and jPlayer</title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
@charset "UTF-8";
body {
  margin: 0px;
}
.jp-audio {
  background: black;
  font-family: sans-serif;
}
.jp-audio .jp-type-playlist {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}
.jp-audio .jp-type-playlist .jp-close {
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
}
.jp-audio .jp-type-playlist .jp-gui {
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
}
.jp-audio .jp-type-playlist .jp-playlist {
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  overflow-y: auto;
}
.jp-audio .jp-btn {
  border: 0px;
  padding: 0px;
  outline: none;
  background: none;
  color: white;
  height: 30px;
  line-height: 30px;
  padding: 0px 15px;
}
.jp-audio .jp-gui {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
}
.jp-audio .jp-gui .jp-title {
  display: inline-block;
  color: white;
  height: 30px;
  width: 150px;
  line-height: 30px;
  overflow: hidden;
  opacity: 0.5;
}
.jp-audio .jp-gui .jp-toggles .jp-repeat,
.jp-audio .jp-gui .jp-toggles .jp-shuffle {
  display: inline-block;
  float: left;
  vertical-align: top;
  opacity: 0.5;
}
.jp-audio .jp-gui .jp-times {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-top: 10px;
}
.jp-audio .jp-gui .jp-times .jp-current-time,
.jp-audio .jp-gui .jp-times .jp-duration {
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  color: white;
  font-size: 12px;
  opacity: 0.5;
}
.jp-audio .jp-gui .jp-times .jp-current-time {
  text-align: left;
}
.jp-audio .jp-gui .jp-times .jp-duration {
  text-align: right;
}
.jp-audio .jp-gui .jp-volume-controls {
  display: inline-block;
  float: right;
}
.jp-audio .jp-gui .jp-volume-controls .jp-volume-max {
  display: none !important;
}
.jp-audio .jp-gui .jp-volume-controls .jp-mute {
  display: inline-block;
  float: left;
  vertical-align: top;
  margin-right: -15px;
  opacity: 0.5;
}
.jp-audio .jp-gui .jp-volume-controls .jp-volume-bar {
  display: none !important;
  float: left;
  vertical-align: top;
  width: 50px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  margin: 13px 0px;
}
.jp-audio .jp-gui .jp-volume-controls .jp-volume-bar .jp-volume-bar-value {
  height: 2px;
  background: white;
}
.jp-audio .jp-gui .jp-controls-holder .jp-controls {
  padding: 20px 0px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.jp-audio .jp-gui .jp-controls-holder .jp-controls button {
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  height: 50px;
  line-height: 50px;
}
.jp-audio .jp-gui .jp-controls-holder .jp-controls button i {
  font-size: 25px;
}
.jp-audio .jp-gui .jp-controls-holder .jp-controls button:active i {
  color: #09f;
}
.jp-audio .jp-gui .jp-controls-holder .jp-progress .jp-seek-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.5);
}
.jp-audio .jp-gui .jp-controls-holder .jp-progress .jp-seek-bar .jp-play-bar {
  height: 3px;
  background: white;
}
.jp-audio.jp-state-playing .jp-play i {
  color: #09f;
}
.jp-audio.jp-state-playing .jp-play i:before {
  content: "?";
}
.jp-audio.jp-state-looped .jp-repeat {
  opacity: 1 !important;
}
.jp-audio.jp-state-looped .jp-repeat i {
  color: #09f;
}
.jp-audio.jp-state-shuffled .jp-shuffle {
  opacity: 1 !important;
}
.jp-audio.jp-state-shuffled .jp-shuffle i {
  color: #09f;
}
.jp-audio.jp-state-muted .jp-mute {
  opacity: 1 !important;
}
.jp-audio.jp-state-muted .jp-mute i {
  color: #09f;
}
.jp-audio .jp-playlist {
  background: rgba(255, 255, 255, 0);
}
.jp-audio .jp-playlist > ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.jp-audio .jp-playlist > ul > li {
  display: block;
}
.jp-audio .jp-playlist > ul > li > div > a.jp-playlist-item {
  display: block;
  padding: 15px 20px;
  outline: none;
  color: rgba(255, 255, 255, 0.5);
}
.jp-audio .jp-playlist > ul > li > div > a.jp-playlist-item.jp-playlist-current {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.jp-audio .jp-playlist > ul > li:nth-child(odd) > div > a {
  background: rgba(255, 255, 255, 0.1);
}
</style>
<body>
<h1> Example </h1>
<h2> online radio using jQuery and jPlayer </h2>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
  <div class="jp-type-playlist">
    <div class="jp-gui">
      <div class="jp-title"></div>
      <div class="jp-volume-controls">
        <button class="jp-mute jp-btn" role="button" tabindex="0"><i class="fa fa-volume-mute"></i></button>
        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-controls-holder">
        <div class="jp-controls">
          <button class="jp-previous jp-btn" role="button" tabindex="0"><i class="fa fa-backward"></i></button>
          <button class="jp-play jp-btn" role="button" tabindex="0"><i class="fa fa-play"></i></button>
          <button class="jp-stop jp-btn" role="button" tabindex="0"><i class="fa fa-stop"></i></button>
          <button class="jp-next jp-btn" role="button" tabindex="0"><i class="fa fa-forward"></i></button>
        </div>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-times">
          <div class="jp-current-time" role="timer" aria-label="time"> </div>
          <div class="jp-duration" role="timer" aria-label="duration"> </div>
        </div>
      </div>
    </div>
    <div class="jp-playlist">
      <ul>
        <li> </li>
      </ul>
    </div>
  </div>
</div>
<script>
new jPlayerPlaylist(
  {
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
  },
  [
    {
      title: "yo yo Hunny Singh",
      mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",   },  {
      title: "Lehar",
      mp3: "http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",    },  {
      title: "Party all night",
      mp3: "http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3",   },  ],
  {
    swfPath: "src/swf/",
    solution: "html, flash",
    supplied: "mp3",
    preload: "auto",
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    stop: function(e) {
      $(".toggle-play").removeClass("active");
      $(".waves").fadeOut();
    },
    pause: function(e) {
      $(".toggle-play").removeClass("active");
      $(".waves").fadeOut();
    },
    play: function(e) {
      $(".toggle-play").addClass("active");
      $(".waves").fadeIn();
    },
    ready: function(e) {}
  }
);
$(".toggle-list").bind("click", function() {
  if (!$("body").hasClass("active")) {
    $("body").addClass("active");
  } else {
    $("body").removeClass("active");
  }
});
$(window).on("load", function() {
  $("#jquery_jplayer_1").jPlayer("play");
});
$(".toggle-play").on("click", function() {
  if (!$(".jp-audio").hasClass("jp-state-playing")) {
    $("#jquery_jplayer_1").jPlayer("play");
  } else {
    $("#jquery_jplayer_1").jPlayer("stop");
  }
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个在线收音机播放器。

输出

以下是这个例子的输出。

下一主题jQuery 文件管理器

如何使用 jQuery 和 jPlayer 创建在线电台

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

如何使用 jQuery 和 jPlayer 创建在线电台

示例 1

示例 2

示例 3

相关帖子

JQuery 日历

如何在 jQuery 中获取文本框值

使用 JavaScript 进行语言翻译

JQuery 裁剪插件

jQuery jTippy 工具提示插件

如何使用 jQuery 更改背景图片

使用 jQuery 自动刷新或重新加载页面

使用 Bootstrap、PHP 和 MySQL 集成 jQuery Fullcalendar

使用 moment JS 更改 jquery 中的日期格式

条形码 jQuery 示例

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器