外贸建站之JS之音频播放代码分享，经常有些特殊要求的客户需要在网站播放视频，MP3等文件，这里我们搜集整理了一些可用的代码分享在这里。
先贴出核心代码：
1 $(function () { 2 var audio = document.getElementById('audio-my'); 3 var audioPlay = false; 4 var audioMax = false; 5 var audioName = ['m1', 'm2']; 6 var audioIndex = 0; 7 var audioText = new Array(); 8 var audioLoop = false; 9 var outTextValue = 0; 10 var audioSpeed = 1.8; 11 audioText = audioName[0].split('-'); 12 $('.audio-head-tittle-text').text(audioText[1]); 13 $('.audio-head-tittle-text-out').text(audioText[1]); 14 $('.audio-head-tittle-text-out-a').text(audioText[1]); 15 $('.audio-head-tittle-by').text(audioText[0]); 16 function drawAudioArc() { 17 var audioCanvas = document.getElementById('audio-img-canvas'); 18 var audioCtx = audioCanvas.getContext('2d'); 19 audioCtx.translate(100, 100); 20 audioCtx.strokeStyle = 'rgba(255,255,255,1)'; 21 audioCtx.lineWidth= '6'; 22 audioCtx.arc(0, 0, 80, 0, Math.PI*2, true); 23 audioCtx.stroke(); 24 audioCtx.beginPath(); 25 audioCtx.lineWidth= '3'; 26 audioCtx.arc(0,0,72,Math.PI/6, Math.PI/6*4, false); 27 audioCtx.stroke(); 28 audioCtx.beginPath(); 29 audioCtx.arc(0,0,72,Math.PI/6*9, Math.PI/6*6, true); 30 audioCtx.stroke(); 31 audioCtx.beginPath(); 32 audioCtx.lineWidth= '2'; 33 audioCtx.arc(0,0,50,Math.PI/6*9, Math.PI/6*11, true); 34 audioCtx.stroke(); 35 } 36 function drawAudioPlay() { 37 var audioCanvasPlay = document.getElementById('audio-img-canvas-play'); 38 var audioCtxPlay = audioCanvasPlay.getContext('2d'); 39 audioCtxPlay.translate(25, 10); 40 audioCtxPlay.lineWidth= '4'; 41 audioCtxPlay.strokeStyle = 'rgba(255,255,255,1)'; 42 audioCtxPlay.rect(-10,0,20,20); 43 audioCtxPlay.stroke(); 44 audioCtxPlay.beginPath(); 45 audioCtxPlay.rect(-10,20,20,10); 46 audioCtxPlay.stroke(); 47 audioCtxPlay.beginPath(); 48 audioCtxPlay.moveTo(0,30); 49 audioCtxPlay.lineTo(0,140); 50 audioCtxPlay.stroke(); 51 audioCtxPlay.beginPath(); 52 audioCtxPlay.translate(0, 140); 53 audioCtxPlay.rotate(120); 54 audioCtxPlay.rect(0,0,18,32); 55 audioCtxPlay.stroke(); 56 audioCtxPlay.beginPath(); 57 audioCtxPlay.lineWidth= '2'; 58 audioCtxPlay.moveTo(10,25); 59 audioCtxPlay.lineTo(30,25); 60 audioCtxPlay.stroke(); 61 audioCtxPlay.beginPath(); 62 } 63 function playAudio(){ 64 if(audio.paused || audio.ended) { 65 audioPlay = true; 66 audio.play(); 67 $('.audio-btn-play').removeClass('audio-btn-play-off').addClass('audio-btn-play-on'); 68 } 69 else { 70 audioPlay = false; 71 $('.audio-btn-play').removeClass('audio-btn-play-on').addClass('audio-btn-play-off'); 72 audio.pause(); 73 } 74 $('#audio-img-canvas-play').toggleClass('audio-img-canvas-play-on'); 75 $('#audio-img-canvas').toggleClass('audio-img-canvas-on'); 76 } 77 78 function timeFormat(seconds) { 79 var minite = Math.floor(seconds / 60); 80 if(minite < 10) { 81 minite = "0" + minite; 82 } 83 var second = Math.floor(seconds % 60); 84 if(second < 10) { 85 second = "0" + second; 86 } 87 return minite + ":" + second; 88 } 89 90 function updateProgress(x){ 91 var progress = $('.audio-by-all'); 92 var position = x - progress.offset().left; 93 var percentage = 100 * position / progress.width(); 94 if(percentage > 100) { 95 percentage = 100; 96 } 97 if(percentage < 0) { 98 percentage = 0; 99 } 100 $('.audio-by-now').css('width', percentage+'%'); 101 audio.currentTime = audio.duration * percentage / 100; 102 } 103 104 function enableProgressDrag() { 105 var progressDrag = false; 106 $('.audio-by-all').on('mousedown', function(e) { 107 progressDrag = true; 108 updateProgress(e.pageX); 109 }); 110 $(document).on('mouseup', function(e) { 111 if(progressDrag) { 112 progressDrag = false; 113 updateProgress(e.pageX); 114 } 115 }); 116 $(document).on('mousemove', function(e) { 117 if(progressDrag) { 118 updateProgress(e.pageX); 119 } 120 }); 121 }; 122 function qiehuan(){ 123 if (audioIndex == audioName.length ){ 124 audioIndex = 0; 125 } 126 if (audioIndex == -1 ){ 127 audioIndex = audioName.length - 1; 128 } 129 audioText = new Array(); 130 audioText = audioName[audioIndex].split('-'); 131 $('.audio-head-tittle-text').text(audioText[1]); 132 $('.audio-head-tittle-by').text(audioText[0]); 133 $('.audio-head-tittle-text-out').text(audioText[1]); 134 $('.audio-head-tittle-text-out-a').text(audioText[1]); 135 $('.audio-head-tittle-text').css('text-indent', 0); 136 audio.src = 'soures/' + audioName[audioIndex] + '.mp3'; 137 $('.audio-by-now').css('width', 0); 138 if(audioPlay){ 139 audio.play(); 140 } 141 } 142 143 function enableSoundDrag() { 144 var volumeDrag = false; 145 $('.audio-sound').on('mousedown', function(e) { 146 volumeDrag = true; 147 updateVolume(e.pageX); 148 }); 149 $(document).on('mouseup', function(e) { 150 if(volumeDrag) { 151 volumeDrag = false; 152 updateVolume(e.pageX); 153 } 154 }); 155 $(document).on('mousemove', function(e) { 156 if(volumeDrag) { 157 updateVolume(e.pageX); 158 } 159 }); 160 }; 161 function updateVolume(x, vol) { 162 var volume = $('.audio-sound'); 163 var soundLeft = x - volume.offset().left; 164 var percentage; 165 if(vol) { 166 percentage =vol * 100; 167 } else { 168 var position = soundLeft; 169 percentage = 100 * position / volume.width(); 170 } 171 if(percentage > 100) { 172 percentage = 100; 173 } 174 if(percentage < 0) { 175 percentage = 0; 176 } 177 percentage = parseInt(percentage); 178 $('.audio-sound-now').css('width', percentage + '%'); 179 $('.audio-sound-art').css('left', percentage + '%'); 180 audio.volume = percentage / 100; 181 }; 182 function audioTextOut() { 183 if(audioMax){ 184 var audioTextWidth = $('.audio-head-tittle-text-out-a').width(); 185 var audioTittleWidth = $('.audio-head-tittle-text').width(); 186 } else { 187 var audioTextWidth = $('.audio-head-tittle-text-out').width(); 188 var audioTittleWidth = $('.audio-head-tittle-text').width(); 189 } 190 if((audioTextWidth > audioTittleWidth) && !audioMax){ 191 if(outTextValue <= -(audioTextWidth - audioTittleWidth + 8)){ 192 audioSpeed = -audioSpeed; 193 } 194 if(outTextValue >= 8){ 195 audioSpeed = -audioSpeed; 196 } 197 outTextValue -= audioSpeed; 198 var outText = outTextValue + 'px'; 199 $('.audio-head-tittle-text').css('text-indent', outText); 200 } 201 if((audioTextWidth > audioTittleWidth) && audioMax){ 202 if(outTextValue <= -(audioTextWidth - audioTittleWidth + 20)){ 203 audioSpeed = -audioSpeed; 204 } 205 if(outTextValue >= 20){ 206 audioSpeed = -audioSpeed; 207 } 208 outTextValue -= audioSpeed; 209 var outText = outTextValue + 'px'; 210 $('.audio-head-tittle-text').css('text-indent', outText); 211 } 212 } 213 214 drawAudioArc(); 215 drawAudioPlay(); 216 updateVolume(0, 0.5); 217 $('#audio-my').on("loadedmetadata", function(){ 218 $('.audio-by-text-now').text(timeFormat(0)); 219 $('.audio-by-text-all').text(timeFormat(audio.duration)); 220 enableProgressDrag(); 221 enableSoundDrag(); 222 }); 223 $('.audio-by-text-now').text(timeFormat(0)); 224 $('.audio-by-text-all').text(timeFormat(audio.duration)); 225 $('#audio-my').on("timeupdate", function(){ 226 var currentTime = audio.currentTime; 227 var duration = audio.duration; 228 var percent = 100 * currentTime / duration; 229 $('.audio-by-now').css('width', percent + '%'); 230 $('.min-time').css('width', percent+'%'); 231 $('.audio-by-text-now').text(timeFormat(currentTime)); 232 audioTextOut(); 233 }); 234 $('#audio-my').on('ended', function() { 235 if(!audioLoop){ 236 audioIndex += 1; 237 } 238 qiehuan(); 239 }); 240 $('#audio-img-canvas-play').on('click', function () { 241 playAudio(); 242 }); 243 $('.audio-btn-play').on('click', function () { 244 playAudio(); 245 }); 246 $('.audio-btn-next').on('click', function () { 247 audioIndex += 1; 248 qiehuan(); 249 }) 250 $('.audio-btn-before').on('click', function () { 251 audioIndex -= 1; 252 qiehuan(); 253 }) 254 $('.audio-btn-sound').on('click', function () { 255 $('.audio-sound').toggleClass('audio-sound-on'); 256 }); 257 $('.audio-btn-list').on('click', function () { 258 if (!audioLoop){ 259 $('.audio-btn-list').removeClass('audio-btn-list-off').addClass('audio-btn-list-on'); 260 } else { 261 $('.audio-btn-list').removeClass('audio-btn-list-on').addClass('audio-btn-list-off'); 262 } 263 audioLoop = ! audioLoop; 264 }); 265 $("#audio").hover(function() { 266 $('.audio').toggleClass('audio-off'); 267 $('.audio-img-cover').toggleClass('audio-img-cover-off'); 268 $('.audio-btn-play').toggleClass('audio-btn-play-off-a'); 269 $('.audio-head-tittle-by').toggleClass('audio-head-tittle-by-off'); 270 $('.audio-head-tittle').toggleClass('audio-head-tittle-off'); 271 $('.min-time').toggleClass('min-time-off'); 272 $('.audio-head-tittle-text').toggleClass('audio-head-tittle-text-off'); 273 $('.audio-btn-play').css('animation', ''); 274 audioMax = !audioMax; 275 $('.audio-head-tittle-text').css('text-indent', 0); 276 outTextValue = 0; 277 audioSpeed = Math.abs(audioSpeed); 278 }); 279 $("#audio").mouseleave(function() { 280 if(audioPlay){ 281 $('.audio-btn-play').css('animation', 'img-cover linear 2.5s infinite'); 282 } 283 $('.audio-sound').removeClass('audio-sound-on'); 284 }) 285 });
HTML部分代码：
1 <div id="audio" class="audio audio-off"> 2 3 <audio id="audio-my" src="soures/m1.mp3" preload="metadata"></audio> 4 5 <div class="audio-head"> 6 <div class="audio-head-tittle"> 7 <div class="audio-head-tittle-text audio-head-tittle-text-off"></div> 8 </div> 9 <div class="audio-head-tittle-by"></div> 10 </div> 11 <div class="add"></div> 12 <div class="min-time"></div> 13 <div class="audio-img"> 14 <canvas id="audio-img-canvas" width="200px" height="200px"></canvas> 15 <div class="audio-img-cover audio-img-cover-off"></div> 16 <canvas id="audio-img-canvas-play" class="audio-img-canvas-play-off" width="45px" height="200px"></canvas> 17 </div> 18 <div class="audio-text">歌词待更新</div> 19 <div class="audio-by"> 20 <div class="audio-by-all"> 21 <span class="audio-by-now"></span> 22 </div> 23 <div class="audio-by-text"> 24 <span class="audio-by-text-now">00:00</span> 25 <span class="audio-by-text-all">00:00</span> 26 </div> 27 </div> 28 <div class="audio-btn"> 29 <div class="audio-btn-list audio-btn-list-off"></div> 30 <div class="audio-btn-before"></div> 31 <div class="audio-btn-play audio-btn-play-off audio-btn-play-off-a"></div> 32 <div class="audio-btn-sound"></div> 33 <div class="audio-btn-next"></div> 34 </div> 35 <div class="audio-sound"> 36 <div class="audio-sound-all"> 37 <span class="audio-sound-now"></span> 38 <span class="audio-sound-art"></span> 39 </div> 40 </div> 41 </div> 42 <a class="audio-head-tittle-text-out"></a> 43 <a class="audio-head-tittle-text-out-a"></a>
以上代码经实测可用，好用。
本文参考：https://www.chinaobd2.com/wholesale/cgdi-at-200-ecu-programmer-for-bmw.html
https://www.chinaobd2.com/wholesale/autel-maxiim-im508-immo-key-programmer.html