replace text with "loading" during audio buffering process by javascript?

Question

I’m trying to build a play/pause all-in-one button in javascript. Determined by the condition of aud_play_pause rather than the click event. Ideally, it can switch to the correct class/text (audio.play -> icon “pause”-> text “Pause”/ audio.paused ->icon “play”->text “Play” audio.buffering -> text "Loading") by itself without affection from auto-play function (just in case). Is that possible for the text displays "loading" during the buffering process by javascript?

Please excuse my poor coding skill and find the complete code from here jsfinddle link

var audio = new Audio(),
u = 0;
var playlist = new Array('http://www.w3schools.com/htmL/horse.mp3',   'http://sifidesign.com/audio/explosion.mp3');

audio.addEventListener('ended', function () {
u = ++u < playlist.length ? u : 0;
console.log(u)
audio.src = playlist[u];
audio.play();
}, true);


function aud_play_pause() {
if (audio.paused) {
audio.play(); 
$('#play span').text('Pause');
$('#play').removeClass('play').addClass('pause');

 } 
 else {
audio.pause();
$('#play span').text('Play');
$('#play').removeClass('pause').addClass('play');
 }
}

document.querySelector('#play').addEventListener('click', aud_play_pause)

audio.volume = 0.5;
audio.loop = false;
audio.src = playlist[0];

The problem in your fiddle is that you didn't include jquery. See this answer on how to include it: http://stackoverflow.com/questions/36620565/how-to-add-jquery-to-jsfiddle — baao, Jan 17 '17 at 19:13

hungerstar · Accepted Answer · 2017-01-17T19:20:25.860

If you include jQuery into your page your code works as expected.

You will often see JavaScript code using $(). More times than not $ = jQuery and jQuery is a JavaScript library that simplifies common JS tasks like querying the DOM, adding/removing events etc.

var audio = new Audio(),
  u = 0;
var playlist = new Array('http://www.w3schools.com/htmL/horse.mp3', 'http://sifidesign.com/audio/explosion.mp3');

audio.addEventListener('ended', function() {
  u = ++u < playlist.length ? u : 0;
  console.log(u)
  audio.src = playlist[u];
  audio.play();
}, true);


function aud_play_pause() {
  if (audio.paused) {
    audio.play();
    $('#play span').text('Pause');
    $('#play').removeClass('play').addClass('pause');

  } else {
    audio.pause();
    $('#play span').text('Play');
    $('#play').removeClass('pause').addClass('play');
  }
}

document.querySelector('#play').addEventListener('click', aud_play_pause)

audio.volume = 0.5;
audio.loop = false;
audio.src = playlist[0];

a.button3 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-size: 12px;
  font-weight: bolder;
  color: white;
  background: rgba(0, 0, 0, 0.376) none repeat scroll 0 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-style: normal;
  font-weight: 700;
  height: 11px;
  letter-spacing: 0;
  line-height: 90%;
  padding: 4px 5px 3px;
  position: fixed;
  left: 197px;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
  top: 2px;
  z-index: 5000;
}
a.button3:hover {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-size: 12px;
  font-weight: bolder;
  color: white;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.34);
}
a.button3.icon {
  padding-left: 2px;
}
a.button3.icon span {
  padding-left: 20px;
  background: url('http://static.tumblr.com/g7ueics/Mhfojxle8/vert-sprites2.png') no-repeat;
  width: 15px;
  height: 15px;
}
a.button3.play span {
  background-position: -5px -5px;
}
a.button3.pause span {
  background-position: -5px -61px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="button3 icon play" id="play" href="#"><span>Play</span></a>

Thank you so much hungerstar.I didn't know people could get notified when I left a comment. It is hard to reach people who answered my queston. Anyway I learned what is jquery today and my web code did come up with a jquery v18 file which I didn’t notice. After I replaced old jquery v18 with the jquery.min.js you give me, the blog stuck when loading the second page (I have the infinite scroll function on ). I has the old jquery v18 file back and everything works fine now. I'm wondering the difference between the two jquery files. — X.L, Jan 17 '17 at 23:12
You mention `v18` for jQuery but it's likely version 1.8 as jQuery is currently at version 3.1.1. When jQuery jumps version numbers (i.e. version 2 to 3) they typically add/remove/modify how some of the library works. From what I can tell, the code that you've included above would probably work with most of versions as you're doing pretty basic things with jQuery. — hungerstar, Jan 18 '17 at 05:20

replace text with "loading" during audio buffering process by javascript?

1 Answers1