audio.gif
语音播放使用audio
audio.pause() 停止播放
audio.play() 开始播放
需要播放图片
icon_IM_voice.gif
icon_IM_voice.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.am-message-list li{position:relative;margin-top: 10px;min-height:20px;padding:8px 20px;border-radius:20px;border-top-left-radius:0px;background-color:#5e5e6c;color:#fff;line-height:22px;cursor: pointer;}
.am-message-list li .icon-voice{display: inline-block;margin-top: 0;margin-right: 4px;width: 18px;height: 18px;background: url(./images/icon_IM_voice.gif) 0 0 no-repeat;background-size: contain;vertical-align: -4px;}
.am-message-list li.pause .icon-voice{background-image: url(./images/icon_IM_voice.png);}
.am-message-list li .voice-time{font-size: 12px;}
.am-message-list li.new .info:after{content: '';display: block;position: absolute;top: 0;right: -12px;width: 8px;height: 8px;background-color: #f00;border-radius: 100%;}
.am-voice-info .info{padding-left: 15px;padding-right: 15px;cursor: pointer;}
</style>
<ul class="am-message-list">
<li class="left pause">
<div class="info" data-time="15" data-src="./images/voice.aac">
<span class="icon-voice pause"></span><span class="voice-time">15''</span>
</div>
</li>
<li class="right pause">
<div class="info" data-time="60" data-src="./images/voice.m4a">
<span class="icon-voice pause"></span><span class="voice-time">15''</span>
</div>
</li>
<li class="left pause new">
<div class="info" data-time="2" data-src="./images/voice.mp3">
<span class="icon-voice pause"></span><span class="voice-time">15''</span>
</div>
</li>
</ul>
<!-- 语音 -->
<audio class="am-voice-audio" preload="auto">
<source>
</audio>
<script src="many/jquery.min.js"></script>
<script>
// 监听ul内部dom节点的变化
// $('.am-message-list').bind('MutationObserver', function (e) {
// console.log(e);
// });
// 语音长度
function voiceSetWidthFn() {
$('.am-voice-info .info').each(function() {
var $this = $(this),
time = $this.data('time'),
wdt = time*6;
if(wdt > 70) {
$this.width(wdt-30);
}
});
}
voiceSetWidthFn();
// 点击播放语音
$('.am-message-list li .info').on('click', function() {
var $this = $(this),
$wrap = $this.parents('li'),
src = $this.data('src'),
voice = $('.am-voice-audio');
$wrap.removeClass('new');
voice[0].currentTime = 0;
if($wrap.hasClass('pause')) {
$('.am-message-list li').addClass('pause');
$wrap.removeClass('pause');
voice[0].src = src;
voice[0].play();
} else {
$wrap.addClass('pause');
voice[0].src = '';
voice[0].pause();
}
});
$('.am-voice-audio').on('ended', function() {
$('.am-message-list li').addClass('pause');
});
</script>
</body>
</html>
