如何改变HTML5音频播放/按钮图像 [英] How to change play/button images in html5 audio

问题描述

我有音频播放器的code。请HALP我改变播放/暂停按钮时preSS的图片。不幸的是我真的不强JS（

 ＆LT; D​​IV CLASS =onlineradio＆GT;＆LT; IMG SRC =图像/ Radio.jpgALT =/＆GT;
＆LT; P＆GT;＆lt;视频ID =yourAudioWIDTH =0HEIGHT =0＆GT;
    ＆lt;信源SRC =的http：//178.219.160.126：8000 / stream.mp3'型='音频/ MPEG'preLOAD =自动/＆GT;
＆LT; /视频＆GT; ＆LT;一个ID =AUDIOCONTROL的href =＃＆GT;＆LT; IMG SRC =图像/ radioscalebutton.pngALT =/＆GT;＆LT; / A＆GT;＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT;脚本＆GT; //＆LT;！[CDATA [
变种yourAudio =的document.getElementById（'yourAudio'），
    CTRL =的document.getElementById（'AUDIOCONTROL'）;ctrl.onclick =功能（）{    //更新按钮
    VAR暂停= ctrl.innerHTML ===暂停！;
    ctrl.innerHTML =暂停？ '暂停'：'玩';    //更新音频
    VaR方法=暂停？ '暂停'：'玩';
    yourAudio【制法】（）;    // prevent默认操作
    返回false;
};
//]]＆GT;＆LT; / SCRIPT＆GT;
 

解决方案

由卡伦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屋！