Question

如何通过Java脚本在我的网络上播放音频（甚至是移动设备），但只需将Js代码放在.tpl文件中一次。我使用NukeViet CMS，如果我使用下面的代码为每个音频我的网络很难加载。

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>

我想在header标记中放置一次js代码，对于每个音频，我只需在编辑器中插入此代码<span class="uba_audioButton" media-url="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3"></span>。

我想播放http://www.tienganh123.com/tieng-anh-pho-thong-lop-8-bai-1/2604-vocabulary.html之类的音频代码，单击底部时图片无法更改，只需点击播放然后点击暂停即可。

Answer 1

使用Audio类JavaScript。

查看此fiddle。

以下是摘录。

＆＃13;

function triggerAudio() {
  var file = new Audio('http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3');
  file.play();
}

＆＃13;

<p onclick="triggerAudio()">
  <img src="http://caicay.vn/uploads/news/loa.gif" />
</p>

＆＃13;

根据OP的评论中提到的要求，这可能会解决问题。

请查看已更新 fiddle。

以下是摘录。

＆＃13;

function triggerAudio(abc) {
  var playid = abc.id.substring(4);
  document.getElementById("audio" + playid).play();
}

＆＃13;

audio {
  display: none;
}

＆＃13;

<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>

＆＃13;

此解决方案包含非常少的Javascript，您不需要为要播放的每个音频单独编写。

在<audio>部分添加您需要的HTML，这仍然适合您。

如果您使用的 CMS 不允许onclick触发，那么您可以使用event listeners注册javascript。

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

以下是使用javascript注册的事件侦听器的fiddle。

通过js库播放和暂停音频onclick

1 个答案: