随着5G时代的来临自媒体风靡，网站开发经常需要在线播放 MP3、WMV 等音频文件。八叔技术之家在开发配音网站时，开发了一个相对简易便捷的音频播放器。使用简单，只需简单传入 ID、音频路径即可。
随着5G时代的来临，自媒体风靡，网站开发经常需要在线播放 MP3、WMV 等音频文件。
八叔技术之家在开发配音网站时，开发了一个相对简易便捷的音频播放器。
使用简单，只需简单传入 ID、音频路径即可。
一、在页面中放入一个空的 audio 组件
<audio id="myAudio" src=""></audio>
二、按钮传值
<i class="coolc icon-bofang coolc_2258" onclick="play('2258')" id="bofang" data-src="文件路径"></i>
三、JS代码（将以下js保存文件并在页面上引用）
/* audio播放器 */
var audio=document.getElementById('myAudio');
function play(id){
var urlsrc = $('.coolc_'+id).data('src');
if($.cookie('voiceid') != id){
$('.coolc_'+$.cookie('voiceid')).removeClass('icon-suspend');
$('.coolc_'+$.cookie('voiceid')).addClass('icon-bofang');
$('.coolc_'+id).removeClass('icon-bofang');
$('.coolc_'+id).addClass('icon-suspend');
$.removeCookie('urlsrc');
$.removeCookie('voiceid');
}
if($.cookie('urlsrc') != urlsrc){
$('#myAudio').attr('src',urlsrc);
}
$.cookie('urlsrc', urlsrc, {expires:7});
$.cookie('voiceid', id, {expires:7});
if(audio.paused){
audio.play();
$('.coolc_'+id).removeClass('icon-bofang');
$('.coolc_'+id).addClass('icon-suspend');
}else{
audio.pause();
$('.coolc_'+id).removeClass('icon-suspend');
$('.coolc_'+id).addClass('icon-bofang');
}
}
服务热线 19970861797
