基於awesome實現audio樣式自定義
阿新 • • 發佈：2021-02-10
1.先看效果
2.完整原始碼（另外為html直接執行）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Audio Demo by Liangxin at 2021-02-09</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.css" rel="stylesheet"> <style> .fa-pause,.fa-pause-circle-o{ color: #F00 }.fa-play .fa-play-circle-o{ color: #0F0 } </style> </head> <body> <a href="#"><div class="btn-audio" ><i class="fa fa-play"></i> <audio class="player" src="http://dict.youdao.com/dictvoice?type=0&audio=hello liangxin" > </audio> </div></a> <div class="btn-audio" ><i class="fa fa-play"></i> <audio class="player" src="http://dict.youdao.com/dictvoice?type=0&audio=How are you" loop="loop"> </audio> </div> <script type="text/javascript"> $(function(){ //播放完畢 $('.player').on('ended', function() { $(this).parent().find("i") .attr("class","fa fa-play"); }) $('.btn-audio').click(function() { var audio = $(this).find("audio").get(0); event.stopPropagation(); if(audio.paused){ $(this).find("i") .attr("class","fa fa-pause"); audio.play(); return; }else{ $(this).find("i") .attr("class","fa fa-play"); audio.pause(); } }); }) </script> </body> </html>
說明：該內容參考https://blog.csdn.net/qq_40999496/article/details/85015033，進行優化，支援多個audio標籤。