[英]How can I change play/button images in HTML5 audio?
我有音頻播放器的代碼。 按下時如何更改播放/暫停按鈕的圖片?
<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>
我已經使用帶有切換狀態按鈕的自定義音頻控件(播放和暫停)實現了最終的工作解決方案。 如果您有不清楚的地方,請詢問。
這是工作解決方案和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>
您可以下載控件的圖像並在本地使用它們。
Karlen Kishmiryan提出的解決方案僅在每頁只有一個音頻按鈕時才有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.