外貿建站之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

外貿建站之JS之音頻播放代碼分享