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

我有音频播放器的代码。按下时请激活我以更改播放/暂停按钮的图片。不幸的是我真的不强JS（如何更改html5音频中的播放/按钮图像

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

来源

2014-09-29 user3555942

一切都很好，你只需要改变图像的网址，例如'图像/ radioscalebutton.png'。 – 2014-09-29 08:44:25

引用此：http：//stackoverflow.com/questions/3472459/custom-1-button-player-with-html5-audio-tag – 2014-09-29 08:47:42

我与切换状态的按钮来实现自定义音频控制最终的工作溶液（播放和暂停），如果事情是不明确你的，请询问。

这里是工作的解决方案和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>

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

来源

2014-09-29 09:01:43

Karlen Kishmiryan提出的解决方案仅适用于每页有一个音频按钮。

来源

2016-02-11 01:26:01

回答

相关问题