資訊專欄INFORMATION COLUMN
摘要：在頁面里添加音樂文件控制音樂自動(dòng)播放音樂音樂播放自動(dòng)播放音樂效果，解決瀏覽器或者自動(dòng)播放問題自動(dòng)播放音樂效果，解決微信自動(dòng)播放問題樣式控制音樂小圖標(biāo)的樣式音樂小圖片點(diǎn)擊控制音樂播放和暫停
在頁面里添加音樂文件
控制音樂自動(dòng)播放
// 音樂
backgroundMusic(document.getElementById("music"));
// 音樂播放
function backgroundMusic(audio){
// 自動(dòng)播放音樂效果，解決瀏覽器或者APP自動(dòng)播放問題
if(audio.paused){
audio.load();
audio.play();
}
function musicInBrowserHandler() {
if(audio.paused){
audio.load();
audio.play();
}
document.body.removeEventListener("touchstart", musicInBrowserHandler);
}
document.body.addEventListener("touchstart", musicInBrowserHandler);
// 自動(dòng)播放音樂效果，解決微信自動(dòng)播放問題
function musicInWeixinHandler() {
if(audio.paused){
audio.load();
audio.play();
}
document.addEventListener("WeixinJSBridgeReady", function () {
if(audio.paused){
audio.load();
audio.play();
}
}, false);
document.removeEventListener("DOMContentLoaded", musicInWeixinHandler);
}
document.addEventListener("DOMContentLoaded", musicInWeixinHandler);
}
css 樣式控制音樂小圖標(biāo)的樣式
.music-icon {
/* display: none; */
z-index: 999;
width: .82rem;
height: .82rem;
position: absolute;
top: .2rem;
right: .1rem;
background: url("../image/music-open.png") no-repeat;
background-position: 0 0;
background-size: .82rem .82rem;
}
.music-icon.open{
background: url("../image/music-open.png") no-repeat;
background-size: .82rem .82rem;
}
.music-icon.close{
background: url("../image/music-close.png") no-repeat;
background-size: .82rem .82rem;
}
音樂小圖片點(diǎn)擊控制音樂播放和暫停
$(".music-icon").on("touchstart",function(){
if($("#music")[0].paused){
$(this).removeClass("close").addClass("open");
$("#music")[0].play();
}else{
$(this).removeClass("open").addClass("close");
$("#music")[0].pause();
}
});
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89834.html
摘要：前些天偷臺(tái)風(fēng)的閑暇時(shí)寫了一個(gè)移動(dòng)端音樂播放器，作為練手項(xiàng)目。有的歌詞周杰倫算什么男人格式是時(shí)間點(diǎn)時(shí)間歌詞創(chuàng)建映射首先以將歌詞字符串分割成以時(shí)間點(diǎn)文字的數(shù)組，但由于這樣分割之后最后一個(gè)元素是空的，所以用刪除最后一個(gè)元素。 這段時(shí)間公司一直在做一個(gè)PC的教育類單頁應(yīng)用，龐大復(fù)雜，涉及非常多H5的知識(shí)，音頻就是其中的一部分。前些天偷臺(tái)風(fēng)的閑暇時(shí)寫了一個(gè)移動(dòng)端音樂播放器，作為練手項(xiàng)目。 在線地...
摘要：基于等開發(fā)一款移動(dòng)端音樂，界面參考了安卓版的網(wǎng)易云音樂布局適配常見移動(dòng)端。圖標(biāo)使用阿里巴巴圖標(biāo)庫，中間的唱片旋轉(zhuǎn)動(dòng)畫使用了實(shí)現(xiàn)。搜索功能實(shí)現(xiàn)功能搜索歌手歌單歌曲熱門搜索數(shù)據(jù)節(jié)流上拉刷新保存搜索記錄。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發(fā)一款移動(dòng)端音樂 WebApp，UI ...
閱讀 3080·2021-10-27 14:16
閱讀 2889·2021-09-24 10:33
閱讀 2297·2021-09-23 11:21
閱讀 3238·2021-09-22 15:14
閱讀 827·2019-08-30 15:55
閱讀 1689·2019-08-30 15:53
閱讀 1763·2019-08-29 11:14
閱讀 2197·2019-08-28 18:11
