一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - 原生JS實現(xiàn)音樂播放器

原生JS實現(xiàn)音樂播放器

2022-01-07 17:16奶茶只要半糖 js教程

這篇文章主要為大家詳細介紹了原生JS音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)音樂播放器的具體代碼，供大家參考，具體內容如下

首先，使用HTML搭好我們的框架結構。這一步為了提高我們代碼的可讀性，多寫注釋。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>原生JS音樂播放器</title>
 <link rel="stylesheet" href="css/public.css" >
 <link rel="stylesheet" href="css/css.css" >
 </head>
 <body>
 <!-- 音樂播放器 -->
 <div class="music">
 <!-- 歌曲信息 -->
 <div class="word">
 <div class="clears"></div>
 <!-- 歌曲封面 -->
 <div class="img">
 <img src="images/1.jpg" id="img" alt="" /></div>
 <!-- 歌曲封面 end -->
 </div>
 <!-- 歌曲信息 end -->
 <!-- 信息和音量 -->
 <div class="mtv">
 <!-- 文字信息 -->
 <div class="text">
 <h1 id="sName">歌曲名稱</h1>
 <h2 id="singer">歌手</h2>
 </div>
 <!-- 文字信息 end -->
 <!-- 音量控制 -->
 <div class="vol01">
 <div class="volTop" id="volText">
 100%
 </div>
 <div class="volBottom">
 <div class="volPro" id="vol">
 <div class="volColor" id="volCol"></div>
 <div class="volBlock" id="volB"></div>
 </div>
 <div class="vImg">
 <img src="images/音量.png" alt="" />
 </div>
 </div>
 </div>
 <!-- 音量控制 end -->
 </div>
 <!-- 信息和音量 end -->
 <!-- 進度條 -->
 <div class="progress">
 <span class="cTime time" id="cTime">00:00</span> <!-- 當前時間 -->
 <span class="tTime time" id="tTime">00:00</span> <!-- 總的時間 -->
 <div class="clears"></div>
 <!-- 進度條小 -->
 <div class="proBar" id="songPro">
 <div class="proColor" id="proBar"></div>
 </div>
 <!-- 進度條小 end -->
 </div>
 <!-- 進度條 end -->
 <!-- 控制按鈕 -->
 <div class="ctrls">
 <div class="btn">
 <img src="images/prev.png" class="prevBtn" id="prevBtn" alt="" />
 <img src="images/next.png" class="nextPrev" id="nextBtn" alt="" />
 </div>
 <button type="button" class="playBtn" id="playBtn"><img src="images/播放.png" alt="" /></button>
 </div>
 <!-- 控制按鈕 end -->
 <audio src="#" id="music"></audio>
 </div>
 <!-- 音樂播放器 end -->
 <script src="js/js.js"></script>
 </body>
</html>

第二步，搭好框架后，就用CSS給他寫上你喜歡的樣式。注意這里我是將樣式分為了公共樣式和獨立樣式分開寫的，提高代碼可重復利用，當然你也可以使用SASS更方便，這里我只提供了獨立樣式，公共樣式可以在網上自主尋找。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
html {
 background: #92b991;
}
 
.music {
 width: 670px;
 height: 400px;
 background: url("../images/bg.jpg") no-repeat center;
 margin-left: auto;
 margin-right: auto;
 border: 1px #3d5e59 solid;
 margin-top: 150px;
 border-radius: 20px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 position: relative;
}
 
.img {
 width: 200px;
 height: 200px;
 border: 2px #fff solid;
 overflow: hidden;
 border-radius: 100%;
 margin-top: 50px;
 margin-left: 35%;
}
 
.mtv {
 width: 670px;
 position: relative;
}
 
.text {
 color: #fff;
 margin-right: 30px;
 margin-left: 30px;
 margin-bottom: 10px;
}
 
.text>h1 {
 font-size: 24px;
 line-height: 30px;
 font-weight: normal;
}
 
.text>h2 {
 font-family: "Microsoft YaHei";
 font-size: 14px;
 font-weight: 300;
 line-height: 1.7;
}
 
.vol01 {
 position: absolute;
 height: 30px;
 width: 120px;
 right: 30px;
 top: -8%;
}
 
.volPro {
 width: 100%;
 height: 5px;
 margin-top: 44.5px;
 border: 1px #fff solid;
 border-radius: 5px;
}
 
.volColor {
 height: 5px;
 width: 100%;
 color: #fff;
 pointer-events: none;
}
 
.volBlock {
 pointer-events: none;
 position: absolute;
 top: 42px;
 width: 10px;
 height: 10px;
 border: 1px #fff solid;
 background: #f4f3f3;
 border-radius: 100%;
 left: 100%;
 margin-left: -5px;
}
 
.volTop {
 color: #fff;
 font-size: 10px;
 position: absolute;
 top: 25px;
 right: 0;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
.vImg {
 position: absolute;
 top: 38px;
 left: -26px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
.time {
 font-family: "Microsoft YaHei";
 font-size: 10px;
 line-height: 1.5;
 color: #fff;
 margin-top: 25px;
}
 
.cTime {
 float: left;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
.tTime {
 float: right;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
.progress {
 margin-left: 30px;
 margin-right: 30px;
}
 
.proBar {
 width: 100%;
 height: 2px;
 overflow: hidden;
 background: #B292FF;
 margin-top: 5px;
 border-radius: 5px;
}
 
.proColor {
 height: 7px;
 width: 30%;
 background: #fff;
 pointer-events: none;
}
 
.ctrls {
 text-align: center;
 margin-top: 20px;
 margin-left: 30px;
 margin-right: 30px;
}
 
.btn {
 position: absolute;
 top: 50px;
}
 
.nextPrev {
 right: 0;
 margin-left: 200px;
 opacity: 0.1;
 transition: all 0.3s;
}
 
.nextPrev:hover {
 opacity: 0.5;
}
 
.prevBtn {
 left: 0;
 opacity: 0.1;
 transition: all 0.3s;
}
 
.prevBtn:hover {
 opacity: 0.5;
}
 
.playBtn {
 height: 200px;
 width: 200px;
 border-radius: 200px;
 opacity: 0.3;
 position: absolute;
 top: 52px;
 left: 250px;
 margin-left: -14px;
 transition: all 0.3s;
}
 
 
.playBtn:hover {
 opacity: 0.5;
 background: #46847b;
}

第三步，也是讓音樂播放器具有靈魂的東西，使用JS添加功能。

1.獲取ID（當然這里也可以獲取類名或是元素，看你自己的習慣）。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let music = document.getElementById("music");
let playBtn = document.getElementById("playBtn");
let prevBtn = document.getElementById("prevBtn");
let nextBtn = document.getElementById("nextBtn");
let img = document.getElementById("img");
let sName = document.getElementById("sName");
let singer = document.getElementById("singer");
let tTime = document.getElementById("tTime");
let proBar = document.getElementById("proBar");
let cTime = document.getElementById("cTime");
let songPro = document.getElementById("songPro");
let vol = document.getElementById("vol");
let volCol = document.getElementById("volCol");
let volB = document.getElementById("volB");
let volText = document.getElementById("volText");

2.添加音樂播放功能。

導入音樂

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let songs = [{
 mp3: "music/01.mp3",
 singer: "趙薇",
 name: "不能和你分手",
 img: "images/1.jpg"
 }, {
 mp3: "music/04.mp3",
 singer: "陳粒",
 name: "易燃易爆炸",
 img: "images/2.jpg"
 }, {
 mp3: "music/06.mp3",
 singer: "胡夏/郁可唯",
 name: "知否知否",
 img: "images/3.jpg"
 }];

音樂播放

?
1
2
3
4
5
6
7
8
9
10
let changeMusic = function(index) {
 music.src = songs[index].mp3;
 img.src = songs[index].img;
 sName.innerHTML = songs[index].name;
 singer.innerHTML = songs[index].singer;
 proBar.style.width = 0;
 };
 
 let index = 0;
 changeMusic(index);

音樂播放暫停

?
1
2
3
4
5
6
7
8
9
playBtn.addEventListener("click", function(event) {
 if (music.paused) {
 music.play();
 event.currentTarget.innerHTML = '<img src="images/暫停.png" id="codetool">

音樂切換

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
prevBtn.addEventListener("click", function(event) { //上一首
 index--;
 if (index <= -1) {
 index = songs.length - 1;
 }
 changeMusic(index);
 });
 
 nextBtn.addEventListener("click", function(event) { //下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 });
 
 music.addEventListener('ended',function () { //自動播放下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 })

3.添加進度條。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
music.addEventListener("loadedmetadata", function(event) { //提示音頻的元數(shù)據(jù)已加載
 tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });
 
 music.addEventListener("timeupdate", function(event) { //監(jiān)聽音樂事實播放事件
 let jd = music.currentTime / music.duration;
 let bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 if (music.currentTime < 10) {
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime);
 } else if (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } else {
 let minet = parseInt(music.currentTime / 60);
 let sec = music.currentTime - minet * 60;
 if (sec < 10) {
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
 } else {
 cTime.innerHTML = "0" + minet + ":" + parseInt(sec);
 }
 }
 });

小功能：點擊進度條，音樂也跟著變化跳轉到指定的時間。

?
1
2
3
4
5
6
songPro.addEventListener("click", function(event) {
 let x = event.offsetX;
 let bfb = x / 610 * 100;
 proBar.style.width = bfb + "%";
 music.currentTime = music.duration * bfb / 100;
 });

4.添加音量調節(jié)模塊。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let getBfb = function(event) {
 let x = event.clientX; //返回當事件被觸發(fā)時鼠標指針向對于瀏覽器頁面（或客戶區(qū)）的水平坐標。
 let volX = vol.getBoundingClientRect().x;  //getBoundingClientRect()獲取元素的寬高位置
 let disX = x - volX;
 disX = Math.max(0, disX); //返回最大數(shù)字
 disX = Math.min(120, disX); //返回最小數(shù)字
 return disX / 120;
 };
 
 let setVol = function(event) {
 let bfb = Math.floor(getBfb(event) * 10000) / 100;
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 music.volume = bfb / 100;
 };
 
 vol.addEventListener("mousedown", function() {
 document.addEventListener("mousemove", setVol);
 });
 document.addEventListener("mouseup", function() {
 document.removeEventListener("mousemove", setVol);
 
 });

全部JS代碼

這里我使用了{}作用域，讓let 或 const聲明的變量只在 let 或 const命令所在的代碼塊 {} 內有效，在 {} 之外不能訪問（ECMAScript 6(簡稱ES6)中新增的）。

?
      
				
					
      
						
							
      
								1
      
							
      
								2
      
							
      
								3
      
							
      
								4
      
							
      
								5
      
							
      
								6
      
							
      
								7
      
							
      
								8
      
							
      
								9
      
							
      
								10
      
							
      
								11
      
							
      
								12
      
							
      
								13
      
							
      
								14
      
							
      
								15
      
							
      
								16
      
							
      
								17
      
							
      
								18
      
							
      
								19
      
							
      
								20
      
							
      
								21
      
							
      
								22
      
							
      
								23
      
							
      
								24
      
							
      
								25
      
							
      
								26
      
							
      
								27
      
							
      
								28
      
							
      
								29
      
							
      
								30
      
							
      
								31
      
							
      
								32
      
							
      
								33
      
							
      
								34
      
							
      
								35
      
							
      
								36
      
							
      
								37
      
							
      
								38
      
							
      
								39
      
							
      
								40
      
							
      
								41
      
							
      
								42
      
							
      
								43
      
							
      
								44
      
							
      
								45
      
							
      
								46
      
							
      
								47
      
							
      
								48
      
							
      
								49
      
							
      
								50
      
							
      
								51
      
							
      
								52
      
							
      
								53
      
							
      
								54
      
							
      
								55
      
							
      
								56
      
							
      
								57
      
							
      
								58
      
							
      
								59
      
							
      
								60
      
							
      
								61
      
							
      
								62
      
							
      
								63
      
							
      
								64
      
							
      
								65
      
							
      
								66
      
							
      
								67
      
							
      
								68
      
							
      
								69
      
							
      
								70
      
							
      
								71
      
							
      
								72
      
							
      
								73
      
							
      
								74
      
							
      
								75
      
							
      
								76
      
							
      
								77
      
							
      
								78
      
							
      
								79
      
							
      
								80
      
							
      
								81
      
							
      
								82
      
							
      
								83
      
							
      
								84
      
							
      
								85
      
							
      
								86
      
							
      
								87
      
							
      
								88
      
							
      
								89
      
							
      
								90
      
							
      
								91
      
							
      
								92
      
							
      
								93
      
							
      
								94
      
							
      
								95
      
							
      
								96
      
							
      
								97
      
							
      
								98
      
							
      
								99
      
							
      
								100
      
							
      
								101
      
							
      
								102
      
							
      
								103
      
							
      
								104
      
							
      
								105
      
							
      
								106
      
							
      
								107
      
							
      
								108
      
							
      
								109
      
							
      
								110
      
							
      
								111
      
							
      
								112
      
							
      
								113
      
							
      
								114
      
							
      
								115
      
							
      
								116
      
							
      
								117
      
							
      
								118
      
							
      
								119
      
							
      
								120
      
							
      
								121
      
							
      
								122
      
							
      
								123
      
							
      
								124
      
							
      
								125
      
							
      
								126
      
							
      
								127
      
							
      
								128
      
							
      
								129
      
							
      
								130
      
							
      
								131
      
							
      
								132
      
							
      
								133
      
							
      
								134
      
						      		
						
							
      
								
      
									{
      
								
      
									 let music = document.getElementById("music");
      
								
      
									 let playBtn = document.getElementById("playBtn");
      
								
      
									 let prevBtn = document.getElementById("prevBtn");
      
								
      
									 let nextBtn = document.getElementById("nextBtn");
      
								
      
									 let img = document.getElementById("img");
      
								
      
									 let sName = document.getElementById("sName");
      
								
      
									 let singer = document.getElementById("singer");
      
								
      
									 let tTime = document.getElementById("tTime");
      
								
      
									 let proBar = document.getElementById("proBar");
      
								
      
									 let cTime = document.getElementById("cTime");
      
								
      
									 let songPro = document.getElementById("songPro");
      
								
      
									 let vol = document.getElementById("vol");
      
								
      
									 let volCol = document.getElementById("volCol");
      
								
      
									 let volB = document.getElementById("volB");
      
								
      
									 let volText = document.getElementById("volText");
      
								
      
									 
      
								
      
									 let songs = [{
      
								
      
									 mp3: "music/01.mp3",
      
								
      
									 singer: "趙薇",
      
								
      
									 name: "不能和你分手",
      
								
      
									 img: "images/1.jpg"
      
								
      
									 }, {
      
								
      
									 mp3: "music/04.mp3",
      
								
      
									 singer: "陳粒",
      
								
      
									 name: "易燃易爆炸",
      
								
      
									 img: "images/2.jpg"
      
								
      
									 }, {
      
								
      
									 mp3: "music/06.mp3",
      
								
      
									 singer: "胡夏/譚維維",
      
								
      
									 name: "知否知否",
      
								
      
									 img: "images/3.jpg"
      
								
      
									 }];
      
								
      
									 
      
								
      
									 let changeMusic = function(index) {
      
								
      
									 music.src = songs[index].mp3;
      
								
      
									 img.src = songs[index].img;
      
								
      
									 sName.innerHTML = songs[index].name;
      
								
      
									 singer.innerHTML = songs[index].singer;
      
								
      
									 proBar.style.width = 0;
      
								
      
									 };
      
								
      
									 
      
								
      
									 let index = 0;
      
								
      
									 changeMusic(index);
      
								
      
									 
      
								
      
									 playBtn.addEventListener("click", function(event) {
      
								
      
									 if (music.paused) {
      
								
      
									 music.play();
      
								
      
									 event.currentTarget.innerHTML = '<img src="images/暫停.png" id="codetool">
		
      
			
      
	
      

      

      
	最終效果展示：
      

      
	原生JS實現(xiàn)音樂播放器
      

      
	以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
      

      
	原文鏈接：https://blog.csdn.net/weixin_44520823/article/details/113102404
      

			
		    
      
			
			
      
			
      
				 
			
      
		
		
      
			
			
      
				
			
      
		
      
		
      
			
      
				
      延伸 · 閱讀
      
			
      
			
		
      
		
      
		
      
		
		
      
			
      
				精彩推薦
			
      
		
      
		
      
			
        
				
        
					
				
        
				 
      • js教程JS+JQuery實現(xiàn)無縫連接輪播圖
				
        
					
        JS+JQuery實現(xiàn)無縫連接輪播圖
        
					
        
						 這篇文章主要介紹了JS+JQuery實現(xiàn)無縫連接輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
        
					
        
						南柯Seven7652021-12-23
					
        
				
        
				
        • 

      • js教程原生js實現(xiàn)滑塊區(qū)間組件
				
        
					
        原生js實現(xiàn)滑塊區(qū)間組件
        
					
        
						 這篇文章主要為大家詳細介紹了js實現(xiàn)滑塊區(qū)間組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
        
					
        
						蒲公英芽11742022-01-05
					
        
				
        
				
        • 

      • js教程前端開發(fā)之JS中編寫For循環(huán)的方法
				
        
					
        前端開發(fā)之JS中編寫For循環(huán)的方法
        
					
        
						 這些年來，JavaScript 發(fā)展得如此之快。如果你之前有其他編程語言經驗的話，你可能無法相信在 JavaScript 中有4種方法可以編寫for 循環(huán)。...
					
        
					
        
						清閑的帆船先生8922021-12-24
					
        
				
        
				
        • 

      • js教程JS實現(xiàn)簡易日歷效果
				
        
					
        JS實現(xiàn)簡易日歷效果
        
					
        
						 這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
        
					
        
						一夜醒來頭禿了3552022-01-06
					
        
				
        
				
        • 

      • js教程JavaScript 防盜鏈的原理以及破解方法
				
        
					
        JavaScript 防盜鏈的原理以及破解方法
        
					
        
						 這篇文章主要介紹了JavaScript 防盜鏈的原理以及破解方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下...
					
        
					
        
						LuckyChou10302021-12-22
					
        
				
        
				
        • 

      • js教程微信小程序選擇圖片控件
				
        
					
        微信小程序選擇圖片控件
        
					
        
						 這篇文章主要為大家詳細介紹了微信小程序選擇圖片控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
        
					
        
						小雅雅家的小凱凱吖9692022-01-04
					
        
				
        
				
        • 

      • js教程原生js實現(xiàn)放大鏡組件
				
        
					
        原生js實現(xiàn)放大鏡組件
        
					
        
						 這篇文章主要為大家詳細介紹了js實現(xiàn)放大鏡組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...
					
        
					
        
						蒲公英芽5292022-01-06
					
        
				
        
				
        • 

      • js教程mustache.js實現(xiàn)首頁元件動態(tài)渲染的示例代碼
				
        
					
        mustache.js實現(xiàn)首頁元件動態(tài)渲染的示例代碼
        
					
        
						 這篇文章主要介紹了mustache.js實現(xiàn)首頁元件動態(tài)渲染的示例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可...
					
        
					
        
						code2roc4232021-12-21
					
        
				
        
				
        • 

			
      
		
      
	
	 


      

      
 

      





主站蜘蛛池模板：
免费观看视频在线播放
|
精品在线观看一区
|
国产成人在线影院
|
日本剧情片在线播放中文版
|
国产精品久久久久久久久ktv
|
成年人免费在线看的惊悚动作片
|
久久精品观看
|
亚洲天堂精品视频
|
欧美另类老女人
|
亚洲黄视频在线观看
|
韩国美女主播在线
|
性欧美f
|
精东影业传媒全部作品
|
免费视频专区一国产盗摄
|
亚洲天堂2016
|
日韩精品视频观看
|
日韩久久精品
|
久久人妻无码毛片A片麻豆
久久热这里只有 精品
|
黄色cc|
99精品国产成人一区二区
|
嫩草影院永久在线播放
|
美女机机对机机的视频(免费)
|
999精品视频在线观看热6
|
日本黄a
|
日韩精品首页
|
色多多幸福宝
|
青草久久精品亚洲综合专区
|
日本在线色|
欧美帅老头oldmangay
|
日韩伦理在线看
|
亚洲+欧美+国产+综合
|
精品国产区一区二区三区在线观看
|
故意短裙公车被强好爽在线播放
|
含羞草传媒每天免费一次破解
|
a级精品九九九大片免费看
a级动漫
|
www日本视频|
久久99re热在线观看视频
|
天天操天天舔
|
美女把小内内脱个精光打屁屁
|
亚洲精品一区二区三区在线观看
|
www.国产在线观看
|