CODEWITHSUNDEEP
javascripthtmlaudio
Lê Trung
Lê Trung

Reputation: 21

Play and pause audio onclick by js library

How can i play audio on my web (even for mobile) by Java script but just put Js code one times in .tpl file. I use NukeViet CMS, if i use the code below for each audio my web will hardly load. 

var audioTagged = document.getElementById('audioID');
    audioTagged.src = 'http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3';
    audioTagged.load();
<p onclick="triggerAudio()"><img src="http://caicay.vn/uploads/news/loa.gif" /></p>

I want to put js code one times in header tag and for each audio i just insert code like this <span class="uba_audioButton" media-url="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3"></span> in editor.

I want to play audio code like http://www.tienganh123.com/tieng-anh-pho-thong-lop-8-bai-1/2604-vocabulary.html , the image hasn't to change when clicking on the bottom, just simply click-play then click-pause.

Upvotes: 2

Views: 299

Answers (1)

Shrinivas Shukla
Shrinivas Shukla

Reputation: 4453

Use Audio class of JavaScript.

Check out this fiddle.

Here is the snippet.

function triggerAudio() {
  var file = new Audio('http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3');
  file.play();
}
<p onclick="triggerAudio()">
  <img src="http://caicay.vn/uploads/news/loa.gif" />
</p>

According to the requirement mentioned in the comments by the OP, this might solve the problem.

Check out this updated fiddle.

Here is the snippet.

function triggerAudio(abc) {
  var playid = abc.id.substring(4);
  document.getElementById("audio" + playid).play();
}
audio {
  display: none;
}
<p id="play1" onclick="triggerAudio(this)">
  <img src="http://caicay.vn/uploads/news/loa.gif" />AFFECT</p>
<p id="play2" onclick="triggerAudio(this)">
  <img src="http://caicay.vn/uploads/news/loa.gif" />ANNOY</p>
<p id="play3" onclick="triggerAudio(this)">
  <img src="http://caicay.vn/uploads/news/loa.gif" />BALD</p>
<p id="play4" onclick="triggerAudio(this)">
  <img src="http://caicay.vn/uploads/news/loa.gif" />BLOND</p>
<p id="play5" onclick="triggerAudio(this)">
  <img src="http://caicay.vn/uploads/news/loa.gif" />CHARACTER</p>

<audio id="audio1">
  <source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/affect.mp3" type="audio/mp3" />
</audio>
<audio id="audio2">
  <source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/annoy.mp3" type="audio/mp3" />
</audio>
<audio id="audio3">
  <source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/bald.mp3" type="audio/mp3" />
</audio>
<audio id="audio4">
  <source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/blond.mp3" type="audio/mp3" />
</audio>
<audio id="audio5">
  <source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/character.mp3" type="audio/mp3" />
</audio>

This solution contains very little Javascript which you don't need to write separately for every audio you want to play.

Add as much <audio> you need in the HTML part and this will still work for you.

If the CMS you are using do not allow onclick trigger, then you can register event listeners using javascript.

var elements = document.getElementsByTagName("p");
for(i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click", function() {
        triggerAudio(this);
    });
}

Here is the fiddle with event listeners registered using javascript.

Upvotes: 2

Related Questions