如何更改 html5 音频中的播放/按钮图像答案

【问题标题】：How can I change play/button images in HTML5 audio?如何更改 html5 音频中的播放/按钮图像
【发布时间】：2014-11-23 14:08:02
【问题描述】：

我有音频播放器的代码。请让我在按下时更改播放/暂停按钮的图片。不幸的是我不擅长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>

【问题讨论】：

一切都很好，您只需要更改图像的URL，例如images/radioscalebutton.png.
参考这个：stackoverflow.com/questions/3472459/…

标签： javascript html audio controls

【解决方案1】：

我已经使用带有切换状态按钮的自定义音频控件（播放和暂停）实现了最终的工作解决方案。如果您有不清楚的地方，请询问。

这是可行的解决方案，the JSFiddle:

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl'),
    playButton = document.getElementById('play'),
    pauseButton = document.getElementById('pause');

function toggleButton() {
    if (playButton.style.display === 'none') {
        playButton.style.display = 'block';
        pauseButton.style.display = 'none';
    } else {
        playButton.style.display = 'none';
        pauseButton.style.display = 'block';
    }
}

ctrl.onclick = function () {

    if (yourAudio.paused) {
        yourAudio.play();
    } else {
        yourAudio.pause();
    }
    
    toggleButton();

    // Prevent Default Action
    return false;
};

#audioControl img {
    width: 50px;
    height: 50px;
}

#pause {
    display: none;
}

<div class="onlineradio">
    <img src="images/Radio.jpg" alt="" />
    <p>
        <audio id="yourAudio">
            <source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" />
        </audio>
        <a id="audioControl" href="#">
            <img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/glossy-black-3d-buttons-icons-media/002110-glossy-black-3d-button-icon-media-a-media22-arrow-forward1.png" id="play"/>
            <img src="https://www.wisc-online.com/asset-repository/getfile?id=415&getType=view" id="pause"/>
        </a>
    </p>
</div>

您可以下载控件的图像并在本地使用。

【讨论】：

【解决方案2】：

Karlen Kishmiryan 提出的解决方案只有在每页有一个音频按钮的情况下才有效。

【讨论】：