如何改变HTML5音频播放/按钮图像 [英] How to change play/button images in html5 audio
本文介绍了如何改变HTML5音频播放/按钮图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有音频播放器的code。请HALP我改变播放/暂停按钮时preSS的图片。不幸的是我真的不强JS(
< DIV CLASS =onlineradio>< IMG SRC =图像/ Radio.jpgALT =/>
< P><视频ID =yourAudioWIDTH =0HEIGHT =0>
<信源SRC =的http://178.219.160.126:8000 / stream.mp3'型='音频/ MPEG'preLOAD =自动/>
< /视频> <一个ID =AUDIOCONTROL的href =#>< IMG SRC =图像/ radioscalebutton.pngALT =/>< / A>< / P>
< / DIV>
<脚本> //<![CDATA [
变种yourAudio =的document.getElementById('yourAudio'),
CTRL =的document.getElementById('AUDIOCONTROL');ctrl.onclick =功能(){ //更新按钮
VAR暂停= ctrl.innerHTML ===暂停!;
ctrl.innerHTML =暂停? '暂停':'玩'; //更新音频
VaR方法=暂停? '暂停':'玩';
yourAudio【制法】(); // prevent默认操作
返回false;
};
//]]>< / SCRIPT>
解决方案
由卡伦Kishmiryan提出的解决方案将只如果有一个每页音响按键的工作。
I have the code of audio player. Please halp me to change the picture of play/pause button when press. Unfortunately i`m not strong in js (
<div class="onlineradio"><img src="images/Radio.jpg" alt="" />
<p><video id="yourAudio" width="0" height="0">
<source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" />
</video> <a id="audioControl" href="#"><img src="images/radioscalebutton.png" alt="" /></a></p>
</div>
<script>// <![CDATA[
var yourAudio = document.getElementById('yourAudio'),
ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
// Update the Button
var pause = ctrl.innerHTML === 'pause!';
ctrl.innerHTML = pause ? 'pause' : 'play';
// Update the Audio
var method = pause ? 'pause' : 'play';
yourAudio[method]();
// Prevent Default Action
return false;
};
// ]]></script>
解决方案
The solution proposed by Karlen Kishmiryan will only work if there is one audio button per page.
这篇关于如何改变HTML5音频播放/按钮图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文