使用原生js实现歌曲上一曲/下一曲

最新推荐文章于 2023-07-09 14:57:40 发布
最新推荐文章于 2023-07-09 14:57:40 发布
阅读量2.8k 收藏 5
点赞数 2
分类专栏： JavaScript 文章标签： javascript web app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47632815/article/details/106098581
版权
这篇博客介绍了如何使用原生js和jQuery创建一个网页播放器，实现上一曲和下一曲的功能。通过 Leancloud 数据库和七牛云对象存储获取歌曲信息。代码中详细说明了查询歌曲ID、获取专辑ID、遍历专辑获取歌曲顺序，并处理歌曲切换的逻辑，包括播放状态的监听和封面转动效果。上一曲功能的实现只需调整判断条件和角标。
摘要由CSDN通过智能技术生成
使用原生js+jqery写的网页播放器实现下一曲/上一曲功能

数据库使用的是leancloud，对象储存使用的是七牛云。

先上代码（下一曲）：

nextSong() {
   
    $('.nextSong').on('click', (e) => {
   
        e.preventDefault()
        let songid = this.view.getSongId()//从查询参数里面获取当前播放的歌曲id
        this.model.getAlbumId(songid).then(() => {
   //根据当前歌曲id查询专辑id（parent属性）
            let albumi
最低0.47元/天 解锁文章
weixin_47632815
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简洁javascript音乐播放器
大伟先生
11-08 1056
1.支持连续播放， 只要每次调用MakeList(id, url, name)就会按顺序生成播放列表/*************************************************************LovelyLife Player V1.0Edited By LovelyLifeAt 2006-09-16All rights reserveredCode Start**
原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）
m0_74222549的博客
03-23 6798
话不多说，下面进入到h5页面的代码。
简单音乐播放器，上一曲下一曲，暂停
tMM_nb的博客
02-15 896
首先，看看我们的实际效果图，我这里文字嫌懒是直接命名的（小伙伴们不要学哦，可以在res里的string里赋值调用），先来看看layout的效果图。非常简单的一个音乐播放器，话不多说，直接上代码。先创建一个bean 用于我们获取歌曲的参数。随便编写的，有能力的小伙伴可以自行编写哦。接着就是我们的mainActivity。接下来到我们的代码部分。接着是music适配器。
JS：自制播放器接入操作系统接口 - Media Session API （可以实现浏览器控制上下首、耳机触控上下首歌曲等）
m0_64130892的博客
07-09 373
当我们自制播放器时，和其它大型播放器网站对比就会发现，他们的播放器，可以用操作系统级的控件来操控上下首，而我们做的只能让用户在网页中点击上下首按钮来切歌，如下： 操作系统媒体控件：笔记本电脑的键盘上自带声音控件按钮，点击键盘上的按钮将会在屏幕上显示声音控件。有耳机的还可以用耳机上的触控按钮来切换上下首、手机版的浏览器下拉通知栏也能看到浏览器的音乐控件。这是操作系统级别的操作。下方以戴尔笔记本的声音操作控件为例，对比查看大型播放器和我们的区别。大家也可以用手机浏览器或者耳机尝试。
webplayer-hotkeys：一个Chrome扩展程序，用于将热键分配给播放暂停并切换音乐（下一个和上一个）。 与Spotify，Deezer，SoundCloud和Youtube一起使用
01-31
网络播放器热键 一个Chrome扩展程序，用于分配热键来播放/暂停和切换音乐（下一首和下一首）。 问题 大多数时候，您想在做其他事情的同时听一些音乐，但是我非常烦恼，不得不切换选项卡来控制音乐。 这个解决方案 通过此扩展程序，您可以配置play ， pause以及转到next首或previous首歌曲的快捷方式。 如果当前没有播放器打开，它将打开Spotify。 要配置快捷方式，请转到chrome://extensions/shortcuts （您必须将其复制并粘贴到地址栏上），找到Webplayer Hotkeys扩展并将快捷方式分配给所需的命令 如果播放器选项卡多​​于一个，则按照以下优先顺序： Spotify > Deezer > SoundCloud > Youtube Music > Youtube 适用于： Spotify 迪泽 声云 优酷 YouTube音乐 执照 麻省理工学院
js简易版歌单播放，可切换下一首
爬楼梯的前端小白的博客
08-21 1437
可暂停 可点击切换上一首下一首 同时变动歌曲名字 新手小白版 还没有实现列表功能 <body> <audio controls> <source id="sour" src="http://m801.music.126.net/20210821210705/83da1af2609b4acc027dbce2ca7ba4c5/jdyyaac/obj/ w5rDlsOJwrLDjj7CmsOj/10421880906/7365/6e5b/3.
《华为音乐播放器项目》——3.JS实现部分功能，播放，上一首，下一首
weixin_42617604的博客
04-29 1981
JS实现部分播放功能： 播放 / 暂停，上一首歌，下一首歌 具体实现过程…直接上代码吧，代码中有注释，应该描述的比较清楚了，并且图片内都是上下衔接的。 如果需要源码的话也点击我的github查看：https://github.com/70kg111/HUAWEI-MUSIC ...
前端播放器js实现播放列表上一曲下一曲删除节目功能
weixin_30268921的博客
05-29 687
关于前端播放器上一曲，下一曲，播放列表的增删改查等等的功能，今天给大家详细解说下逻辑实现 添加到列表思路：用数组，将节目名称添加到数组中，通过判断数组来实现，上代码 var idList = [] , //节目数组 先var一个空数组 playListIndex = 0; //播放列表当前节目的下标 再定义一个变量来存放下标 function FnAddList(list_d...
andriod 简易音乐盒开发实现上一曲、下一曲、暂停、自动播放下一曲（第二篇具体实现）
黑子鑫的博客
07-03 1145
    mp3抽象类package com.example.onlinemusicbox;public class Mp3Info{ private String songName;//歌曲名 private long Id;//序列号 private String Artist;//艺术家名 private long Duration; private long Size; //歌曲大小 pri...
原生微信小程序源码 - -仿网易云音乐
最新发布
05-01
1. **音乐播放功能**：小程序内应包含音乐播放器组件，支持播放、暂停、上一曲、下一曲、调整音量等功能。可能还会有播放进度条和歌词同步显示。 2. **歌单推荐**：类似网易云音乐，小程序可能会提供个性化推荐歌单...
JMF版Java音乐播放器
06-07
一个利用JMF实现的音乐盒，能够同步歌词显示和更换皮肤，仿酷我音乐盒
一款web音乐播放器(包含上下曲、循环功能)
02-28
在实际开发中，可能还需要考虑其他功能，比如预加载下一曲、播放模式（顺序、随机、单曲循环）切换、音效设置等。这些功能同样可以通过HTML5的API和jQuery的灵活性来实现。 综上所述，这款Web音乐播放器的实现主要...
个人简历模板（原生三件套）
08-11
例如，可以通过JavaScript实现点击按钮显示/隐藏详细信息、滚动到特定部分、计时器功能（如倒计时展示应聘者期望的入职时间）等。JavaScript还可以与Ajax技术结合，实现异步数据加载，比如从服务器动态获取并更新...
Javascript-MusicPlayer:一个基于 Javascript 的带有播放列表的音乐播放器。 支持的歌曲格式取决于浏览器
06-21
在`script.js`中，你需要关注的函数可能包括`playSong()`, `pauseSong()`, `nextSong()`, `previousSong()`等，它们分别对应播放、暂停、下一曲和上一曲的操作。同时，还有事件监听器用于响应用户交互，例如`...
ReactNativeMusic:使用 React Native 和 SoundCloud API 构建一个 iOS 音乐播放器！
06-01
- 播放器界面通常包括播放/暂停按钮、进度条、音量控制、下一曲/上一曲按钮等。这些功能需要与音频库配合，监听并更新状态。 4. **网络请求与数据管理**： - 使用`fetch`或`axios`等库发送HTTP请求，获取...
用Qt写一个简单的音乐播放器（四）：歌曲浏览、上一曲、下一曲
LyRics1996的博客
07-26 7882
一、前言 在用Qt写一个简单的音乐播放器（一）：使用QMediaPlayer播放音乐中，我们已经知道如何去使用QMediaPlayer播放音乐。 在用Qt写一个简单的音乐播放器（二）：增加界面（开始和暂停音乐)中，我们增加了播放音乐/暂停音乐的按钮。 在用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）中，我们加入了播放控制和音量控制。 但是从头到尾，我们一直都只能播放一首歌曲，连选择歌曲都不行，怎么能算是音乐播放器呢？ 这一篇就来谈一谈歌曲选择播放的问题。 二、浏览文件夹 1.控件 想要选
一个简单的音乐播放器（实现上一曲下一曲，和自动播放）
热门推荐
Lancerr的博客
04-02 1万+
参考两位博客完成：https://www.cnblogs.com/yudada/p/7846097.html，点击打开链接https://blog.csdn.net/i_do_can/article/details/50913656，点击打开链接注释比较详细，直接上代码了Mainactivity.javapackage com.example.lancer.lancermusicplayer; ...
原生js实现播放器操作（随机播放、上/下一首、播放/暂停）
mic_jay的博客
10-22 3371
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>播放器</title> </head> <body> <audio hidden controls="controls" ...
显示歌曲进度条（使用moment.js第三方库格式化时间），以及歌曲播放完毕自动播放下一首
weixin_48952990的博客
07-15 730
显示歌曲进度条（使用moment.js第三方库格式化时间），以及歌曲播放完毕自动播放下一首
请使用原生js实现轮播图
03-31
以下是一个简单的原生js轮播图实现： HTML代码： ```html <div id="slider"> <img src="img1.jpg" alt=""> <img src="img2.jpg" alt=""> <img src="img3.jpg" alt=""> </div> ``` CSS代码： ```css #slider { position: relative; width: 500px; height: 300px; overflow: hidden; } #slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } #slider img.active { opacity: 1; } ``` JavaScript代码： ```javascript var slider = document.getElementById('slider'); var images = slider.getElementsByTagName('img'); var current = 0; function slide() { // 隐藏当前图片 images[current].classList.remove('active'); // 计算下一张图片的索引 current = (current + 1) % images.length; // 显示下一张图片 images[current].classList.add('active'); } // 每3秒钟自动切换图片 setInterval(slide, 3000); ``` 上述代码实现了一个简单的自动轮播图，每3秒钟自动切换一张图片。可以根据需要添加其他功能，如左右箭头切换、圆点导航等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值