自定义音频标签
自定义音频标签
提问于 2012-01-15 07:21:40
我正在尝试在HTML5中自定义音频标签。使用控件很容易，但是有没有一种方法可以显示和自定义音轨和音量控制器的进度条？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-01-15 16:47:31
下面是一个使用css样式元素的javascript控制的音频播放器的示例：
<!doctype html>
<html lang="en">
<head>
<style>
html, body {padding:50px;}
* {margin:0px;padding:0px;}
#audioWrapper {position:relative;display:inline-block;}
.audioPlayer {position:absolute;left:0px;bottom:0px;
display: block;height:48px;width:400px;}
#playPauseButton {position: absolute;top: 13px;left: 10px;
display:inline;width: 18px;height: 22px;
background: url(/images/player.png) no-repeat -20px -2px;
cursor: pointer;}
#playPauseButton.playing {background-position:0px -2px;}
#playPauseButton:active {top:10px;}
#timeRemaining {position:absolute;top:17px;right:5px;font-size:11px;
font-weight:bold;color:#fff;}
#timeLine {position: absolute;top: 19px;left: 50px;right: 50px;
height: 6px;padding: 2px;border-radius: 5px;background: #546374;}
#slideHandle {position: absolute;top: -6px;left: 0;width: 20px;
height: 20px;margin-left: -10px;
background: url(/images/player.png) no-repeat -39px -3px;
cursor: pointer;}
.audioPlayerBackground {height:400px;width:400px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
function setupAudio(){
var userSetSliderPosition = false;
var audioSliderCreated = false;
if(!!document.createElement('audio').canPlayType) {
var audioElemStr = '<audio><source src="/sound/Mozart_-_Bassoon_Concerto_in_Bb_major_-_Allegro.ogg" type="audio/ogg"></source></audio>';
$(audioElemStr).insertAfter(".audioPlayer #timeRemaining");
audioPlayer = $('.audioPlayer audio').get(0);
slideHandle = $('.audioPlayer #slideHandle');
timeRemainingElem = $('.audioPlayer #timeRemaining');
$("#playPauseButton").click(function() {
if (audioPlayer.paused) { audioPlayer.play(); }
else { audioPlayer.pause(); }
});
$(audioPlayer).bind('play',function() {
$("#playPauseButton").addClass('playing');
}).bind('pause ended', function() {
$("#playPauseButton").removeClass('playing');
});
$(audioPlayer).bind('timeupdate', function() {
var audioPlayerDuration = audioPlayer.duration;
if (!userSetSliderPosition){
var audioPlayerCurrentTime = audioPlayer.currentTime;
var audioPlayerRemainingTime = parseInt(audioPlayerDuration - audioPlayerCurrentTime);
var slideHandlePercentComplete = (audioPlayerCurrentTime / audioPlayerDuration) * 100;
var minutes = parseInt(audioPlayerRemainingTime/60);
var seconds = parseInt(audioPlayerRemainingTime%60);
slideHandle.css({left: slideHandlePercentComplete + '%'});
timeRemainingElem.text(minutes + ':' + (seconds < 10 ? ('0' + seconds) : seconds));
}
if (!audioSliderCreated) {
audioSliderCreated = true;
$('.audioPlayer #timeLine').slider({
max: audioPlayerDuration,
step: 0.01,
animate: "slow",
slide: function() {
userSetSliderPosition = true;
},
stop:function(e,ui) {
userSetSliderPosition = false;
audioPlayer.currentTime = ui.value;
}
});
}
});
}
}
</script>
</head>
<body onload="setupAudio();">
<div id="audioWrapper">
<img class="audioPlayerBackground" alt="" src="/images/spaceJunk.png" />
<div class="audioPlayer">
<div id="playPauseButton"></div>
<div id="timeLine">
<div id="slideHandle" class ="ui-slider-handle"></div>
</div>
<div id="timeRemaining"></div>
<!--audio and source tags will be inserted here, if the browser supports them-->
</div>
</div>
</body>
</html>您可以在这里看到它的一个运行示例：http://www.vdstudios.net/tutorials/html/stylableAudioPlayer.html
Stack Overflow用户
发布于 2012-01-15 07:42:50
我建议在后台播放音频，通过JavaScript使用您自己的定制界面来控制它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8866223
复制相关文章
相似问题
腾讯云开发者
