Home Web Front-end HTML Tutorial Use the simplest front-end technology to create a simple music player

Use the simplest front-end technology to create a simple music player

Mar 08, 2018 pm 02:27 PM
make

This time I will bring you the simplest front-end technology to make a simple music player. What are the precautions. The following is a practical case. Let’s take a look.

The music of this player is obtained through Douban FM’s API. We can randomly listen to any music on Douban FM.

html part
Code:

<div class="wrapper">
<div class="background"></div>
<div class="content">
<audio src=""></audio>
<div class="music-massage">
<p class="musicname"></p>
<p class="musicer"></p>
</div>
<div class="music-icon">
<a class="m-icon m-fenxiang colored" href="http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538" target="new"></a>
<span class="m-icon m-star colored"></span>
<span class="m-icon m-heart colored"></span>
</div>
</div>
<span class="basebar">
<span class="progressbar"></span>
</span>
<div class="controls">
<div class="play-control">
<span class="m-icon m-play btn1" title="播放/暂停"></span>
<span class="m-icon m-change btn2" title="换频道"></span>
<span class="m-icon m-next btn3" title="换曲"></span>
</div>
<div class="music-control">
<span class="m-icon m-xunhuan colored"></span>
<span class="m-icon m-radom colored"></span>
</div>
</div>
</div>
Copy after login

I won’t write the css code here. You can look at the source file directly or look at it from the developer tools. If you have any questions, you can message me privately.

js part
Code one (playback control):

//播放控制
var myAudio = $("audio")[0];
// 播放/暂停控制
$(".btn1").click(function(){
if (myAudio.paused) {
play()
} else {
pause()
}
});
// 频道切换
$(".btn2").click(function(){
getChannel();
});
// 播放下一曲音乐
$(".btn3").click(function(){
getmusic();
});
function play(){
myAudio.play();
$(&#39;.btn1&#39;).removeClass(&#39;m-play&#39;).addClass(&#39;m-pause&#39;);
}
function pause(){
myAudio.pause();
$(&#39;.btn1&#39;).removeClass(&#39;m-pause&#39;).addClass(&#39;m-play&#39;);
}
Copy after login

Code two (ajax to get Douban FM music):

//获取随机频道信息
function getChannel(){
$.ajax({
url: &#39;http://api.jirengu.com/fm/getChannels.php&#39;,
dataType: &#39;json&#39;,
Method: &#39;get&#39;,
success: function(response){
var channels = response.channels;
var num = Math.floor(Math.random()*channels.length);
var channelname = channels[num].name;//获取随机频道的名称
var channelId = channels[num].channel_id;//获取随机频道ID
$(&#39;.record&#39;).text(channelname);
$(&#39;.record&#39;).attr(&#39;title&#39;,channelname);
$(&#39;.record&#39;).attr(&#39;data-id&#39;,channelId);//将频道ID计入data-id中
getmusic();
}
})
}
// 通过ajax获取歌曲
function getmusic(){
$.ajax({
url: &#39;http://api.jirengu.com/fm/getSong.php&#39;,
dataType: &#39;json&#39;,
Method: &#39;get&#39;,
data:{
&#39;channel&#39;: $(&#39;.record&#39;).attr(&#39;data-id&#39;)
},
success: function (ret) {
var resource = ret.song[0],
url = resource.url,
bgPic = resource.picture,
sid = resource.sid,//获取歌词的参数
ssid = resource.ssid,//获取歌词的参数
title = resource.title,
author = resource.artist;
$(&#39;audio&#39;).attr(&#39;src&#39;,url);
$(&#39;.musicname&#39;).text(title);
$(&#39;.musicname&#39;).attr(&#39;title&#39;,title)
$(&#39;.musicer&#39;).text(author);
$(&#39;.musicer&#39;).attr(&#39;title&#39;,author)
$(".background").css({
&#39;background&#39;:&#39;url(&#39;+bgPic+&#39;)&#39;,
&#39;background-repeat&#39;: &#39;no-repeat&#39;,
&#39;background-position&#39;: &#39;center&#39;,
&#39;background-size&#39;: &#39;cover&#39;,
});
play();//播放
}
})
};
Copy after login

Note: Douban will restrict our access, so be sure to add

Code 3 (Progress Bar Control) under the tag ):

setInterval(present,500)    //每0.5秒计算进度条长度
$(".basebar").mousedown(function(ev){  //拖拽进度条控制进度
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var percentage = (posX - targetLeft)/400100;
myAudio.currentTime = myAudio.duration * percentage/100;
});
function present(){
var length = myAudio.currentTime/myAudio.duration100;
$(&#39;.progressbar&#39;).width(length+&#39;%&#39;);//设置进度条长度
//自动下一曲
if(myAudio.currentTime == myAudio.duration){
getmusic()
}
}
Copy after login

The audio tag itself in html5 provides a progress bar function and a volume control function. Here I set up the progress bar myself for the sake of a beautiful interface. The volume control has not been added yet. You can add it yourself. .

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to turn the browser into an editor

##How to use python to determine image similarity

Javascript script used to download images

The above is the detailed content of Use the simplest front-end technology to create a simple music player. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Specific method to create film movement effect in PPT Specific method to create film movement effect in PPT Mar 26, 2024 pm 04:00 PM

1. Start PPT, create a new blank document, select all text boxes and delete them. 2. Execute the Insert-Shape command, drag a rectangle in the document, and fill the shape with black. 3. Drag the rectangle to elongate it, execute the Insert-Shape command, drag out the small square, and set the fill color to white. 4. Copy and paste the small squares one by one so that the top and bottom are evenly distributed on both sides of the film. After selecting them all with ctrl+a, right-click and select Group. 5. Execute the Insert-Picture command, find the picture to be inserted in the pop-up dialog box, click to open, and adjust the size and position of the picture. 6. Repeat step 5 to insert and set the remaining pictures in order to form a film picture. 7. Select the film, execute animation-add animation command

How to make a tomato novel cover How to make a tomato novel cover Feb 23, 2024 pm 01:55 PM

How to make the cover of Tomato novel? You can make exclusive novel cover in Tomato novel, but most friends don’t know how to make the cover of Tomato novel. Next is the picture of how to make the cover of Tomato novel brought by the editor to the players. Tutorial, interested players come and take a look! Tomato Novel usage tutorial How to make a Tomato Novel cover 1. First open the Tomato Novel APP, enter the work management page to create a new book, and select the [Cover Template] as shown by the arrow below; 2. Then enter the cover template page and select your favorite cover Template; 3. After finally selecting the cover, click [Confirm] in the upper right corner.

Operation guide for creating mobile Excel tables Operation guide for creating mobile Excel tables Feb 18, 2024 pm 02:41 PM

Mobile Excel table creation tutorial With the popularity of mobile devices and the continuous advancement of technology, mobile phones have become one of the indispensable tools in our daily life and work. Using Excel spreadsheets on your mobile phone can easily record, calculate and analyze data and improve work efficiency. This article will share with you the basic operations and techniques for creating mobile Excel tables. 1. Choose the right application. There are many mobile Excel applications on the market to choose from, such as GoogleSheets, Micro

How to use CSS to create a countdown effect How to use CSS to create a countdown effect Oct 26, 2023 am 10:36 AM

How to use CSS to create a countdown effect. The countdown effect is a common function in web development. It can provide users with a dynamic effect of countdown and give people a sense of urgency and expectation. This article will introduce how to use CSS to achieve the countdown effect, and give detailed implementation steps and code examples. The implementation steps are as follows: Step 1: HTML structure construction First, create a div container in HTML to wrap the countdown content. For example: &lt;divclass="countd

Let me teach you! How to create animation effects in PPT! Let me teach you! How to create animation effects in PPT! Mar 20, 2024 pm 06:40 PM

When making PPT, using some animation effects will make it more lively and cute than without using animation effects. With the addition of animation effects, people may like to watch this PPT, so we must learn how to create animation effects for PPT. Next, I will introduce in detail how to add animation effects to PPT. Please continue reading and study these steps carefully. I believe they will be helpful to you! First, open the PPT we made ourselves. You will notice that this PPT currently does not have any animation effects (as shown by the red arrow in the picture below). 2. Then, we need to add animation effects to the picture. We first select the picture, and then click the [Animation] button on the menu bar (as shown in the red circle in the figure below). 3. Next, we click inside the animation

How to make a word cover How to make a word cover Mar 19, 2024 pm 06:50 PM

A graduation thesis must have a cover, a table of contents, an end, etc. Only then can the thesis be complete. In the last issue, the editor has shared with friends how to make a table of contents in Word. In this issue, I will share with you how to make a word cover. If you don’t know how to make it, hurry up! 1. First, we open the word document we want to make a cover, as shown in the figure below: 2. Then, we click the [Chapter] button on the menu bar and select the cover page. This function is equivalent to a cover library, in which you can Choose a suitable and beautiful cover by yourself, as shown in the red circle in the picture below: 3. After clicking, you can see various types of covers, such as business type, suitable for company contracts and documents; resume type, suitable for job hunting and submission of resumes Friends, wait, okay?

How to make ppt What is the process of making ppt How to make ppt What is the process of making ppt Feb 22, 2024 pm 05:00 PM

Click the insert option in the software, create a new blank presentation, enter the subject and text, and set the display order of text and objects. Applicable model of the tutorial: Lenovo AIO520C System: Windows 10 Professional Edition: PowerPoint 2022 Analysis 1 After opening the PPT, click the file option and select New Blank Presentation. 2Input the topic and text, and add audio, picture, video and other effects. 3Finally, set the display order and animation effects of text and objects as required. Supplement: How to insert a video into ppt 1. First click to open the PowerPoint software, and after entering, click the insert option in the upper left corner. 2 Then click the video option in the upper right corner. 3. A pop-up box will appear, click on the video from the file. 4Then select

How to make Fushengyi Linglong snail noodles How to make Fushengyi Linglong snail noodles Mar 07, 2024 pm 04:34 PM

In the game "Fu Sheng Yi Ling Long", players can make various delicacies through recipes. Many players don't know how to make snail noodles. To make snail noodles, you need to prepare four ingredients: rice, mountain spring water, bamboo shoots, and snails. How to make Fushengyi Linglong Snail Noodles: Use rice, mountain spring water, bamboo shoots and snails for cooking. 1. To make snail noodles, players need to prepare four materials: rice, mountain spring water, bamboo shoots, and snails. 2. After the collection is completed, players can freely cook on the stove. 3. In the game "Fu Sheng Yi Ling Long", players who are chefs can use ingredients to freely cook different foods. 4. If you want to make specific food, you need to match the corresponding ingredients.

See all articles