當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

如何用JS实现音乐播放、暂停

發(fā)布時間：2023/12/3 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了如何用JS实现音乐播放、暂停小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

剛開始學習的時候，我不懂怎么在HTML中播放音樂，后來才發(fā)現(xiàn)其實很簡單的，只要一句代碼配合js使用就OK了。好了請看下面的代碼
源代碼：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <link rel="stylesheet" href="./css/Untitled-2.css"> </head> <body><div class="box"><img src="./images/01.jpg" alt=""><div class="tubiao" id="tb"><div class="tubiao1" id="tb1"></div><div class="tubiao2" id="tb2" style="display: none;"></div></div></div><video src="./羽岡佳 - 花火の夜に.mp3" loop preload="auto" id="music"></video><script src="js/js.js"></script> </body> </html>

css部分：

@charset "utf-8"; /* CSS Document */ *{padding: 0px;margin: 0px; } .box{width: 350px;height: 500px;margin: 80px 40%;overflow: hidden;position: relative; } .box img{width: 350px;height: 500px; } .tubioa{width: 43px;height: 43px;cursor: pointer;position: absolute;top: 0px;right: 0px; } .tubiao1,.tubiao2{width: 43px;height: 43px;position: absolute;top: 0px;right: 0px; } .tubiao1{background: url(../images/02.png) 0px -44px no-repeat; } .tubiao2{background: url(../images/02.png) 0px 0px no-repeat;animation: TuBiao 3s linear infinite; } @keyframes TuBiao{0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);} }

Js部分：

// JavaScript Document var number=true; var music=document.getElementById("music"); var tb=document.getElementById("tb");tb.onclick=function(){if(number===false){number=true;document.getElementById("tb1").style.display="block";document.getElementById("tb2").style.display="none";music.pause();}else{document.getElementById("tb1").style.display="none";document.getElementById("tb2").style.display="block";number=false;music.play();}};

讓我們看下效果：
沒點擊，就不播放音樂

點擊后，播放音樂并旋轉圖標

其實就是用video標簽來存放音樂，然后用js控制播放、暫停。好了看完上面的代碼，你學會了沒有呀。

總結

以上是生活随笔為你收集整理的如何用JS实现音乐播放、暂停的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：阿里云云服务器ecs怎么建站（阿里云服务
下一篇：谷歌域名邮箱怎么注销（谷歌域名邮箱怎么注