基于jQuery实现音乐播放试听列表

2024-11-30 13:50:48

本文为大家分享了jQuery实现的音乐播放试听列表，可以实现播放，暂停，自动获取音频路径功能，具体内容如下

1.html文件

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>音乐播放试听列表</title>
 </head>
 <body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="modal-content" id="music_list_box">
 <div class="row music_list_li" id="music_list_li_height" style="">
  <div class="col-xs-12">
   <ol class="list-unstyled user_music_list_ol" id="play_list_ol">
    <audio id="myAudio" src="">你的浏览器不支持音频播放</audio>
    <li class="user_music_list">
     <label>MusicNAME1</label>
     <a href="#" id="MusicNAME1" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
    <li class="user_music_list">
     <label>MusicNAME2</label>
     <a href="#" id="MusicNAME2" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
    <li class="user_music_list">
     <label>MusicNAME3</label>
     <a href="#" id="MusicNAME3" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
    <li class="user_music_list">
     <label>MusicNAME4</label>
     <a href="#" id="MusicNAME4" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
    <li class="user_music_list">
     <label>MusicNAME5</label>
     <a href="#" id="MusicNAME5" class="user_doplay" name="stoped">
      <img src="http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png">
     </a>
    </li>
   </ol>
   <script type="text/javascript" src="play.js"></script><!-- 播放/暂停 -->
  </div>
 </div>
</div>
 </body>
</html>

2.run.js

//
//  @author FUCMLIF
//  @date 2016/4/6
//
jQuery("a.user_doplay").click(function(){
 var x = document.getElementById("myAudio");
 if (x.paused) {
  jQuery("a.user_doplay").find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png');
  jQuery(this).find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/stop.png');
  jQuery(this).attr("name","playing");
  x.play(); //播放
 } else if (x.play && jQuery(this).attr("name") == "stoped") {
  jQuery('#myAudio').attr('src',jQuery(this).attr('id') + '.mp3');//修改音频路径
  jQuery("a.user_doplay").find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png');
  jQuery(this).find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/stop.png');
  jQuery("#play_list_ol").find('a').attr('name','stoped');
  jQuery(this).attr("name","playing");
  x.play(); //播放
 } else if (x.play && jQuery(this).attr("name") == "playing") {
  jQuery(this).find('img').attr('src','http://sandbox.runjs.cn/uploads/rs/424/shsayjwv/play.png');
  jQuery("#play_list_ol").find('a').attr('name','stoped');
  x.pause(); //暂停
 } else {
  alert("这个提示不应该出现");
 }
});

以上就是本文的全部内容，希望对大家的学习有所帮助。

实现音乐播放器的代码（html5+css3+jquery）

看下面的效果图很不错吧,是怎么实现的呢?下面小编给大家分享下我的一番宝物,Lisa唱的在angel beats的插曲.用到html5.css.jquery实现此音乐播放器. 一番宝物,Lisa唱的在angel beats的插曲最后在简述这个东西怎么写之前,本人男,24岁,籍贯上海,诚招女友一枚,要求:性格温顺...(省略500字) <div class="Music"> <div class="MusicPlaySound"> &l
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例

演示地址: http://bejson.com/demos/qqmusic/ 代码下载:http://www.jqdemo.com/932.html 查询QQ音乐是很早前就出来的一个接口. 这里使用jQuery和jPlayer来实现QQ空间音乐的查询. 首先感谢bejson收集的各种有用的接口,当然也包含QQ空间音乐接口. 它的网址是:http://www.bejson.com/webInterface.php 我们要使用的接口位于bejson接口页面中的音乐接口栏里. QQ音乐接口地址: ht
利用jQuery设计一个简单的web音乐播放器的实例分享

一.准备数据库首先,我们设计MYSQL数据库如下: CREATE TABLE `songs` ( `song_id` int(11) NOT NULL AUTO_INCREMENT, `url` varchar(500) NOT NULL, `artist` varchar(250) NOT NULL, `title` varchar(250) NOT NULL, PRIMARY KEY (`song_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AU
jQuery实现大转盘抽奖活动仿QQ音乐代码分享

jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码. 运行效果图:---------------------------------------效果查看源码下载-------------------------------------- 为大家分享的jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效代码如下 <head> <meta http-equiv="Content-Type" co
jquery控制背景音乐开关与自动播放提示音的方法

本文实例讲述了jquery控制背景音乐开关与自动播放提示音的方法.分享给大家供大家参考.具体如下: 很多人初学网页制作时在网页中加入一段背景音乐,听到音乐响起的那一刻往往都会有一丝的成就感. 这里就为大家讲解如何使用js控制背景音乐播放与停止.具体如下: 一.jquery控制背景音乐开关复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/
基于jQuery实现音乐播放试听列表

本文为大家分享了jQuery实现的音乐播放试听列表,可以实现播放,暂停,自动获取音频路径功能,具体内容如下 1.html文件 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>音乐播放试听列表</title> </head>
python 基于wx实现音乐播放

# -*- coding: utf-8 -*- """ Created on Sat Apr 25 18:15:36 2020 @author: Administrator """ import requests import binascii import json import datetime import traceback from Crypto.Cipher import AES from tkinter import * FAKE_
c#基于winform制作音乐播放器

前言:项目是c#的winform 写的,使用的播放器是基于AxWindowsMediaPlayer. AxWindowsMediaPlayer的方法 1 首先新建一个页面如图所示: 图片左侧是列表使用listview 右侧是背景图片.图片框框的地方是后面可以实现的,+和-按钮分别代表添加文件和删除文件还有就是控制播放的顺序.下面的分别是修改歌词的字体和展示/隐藏 2 新建一个透明的歌词页面[窗体] 3 新建一个半透明的页面[窗体] 4 业务代码 using System; using S
C#基于winform实现音乐播放器

本文实例为大家分享了C#基于winform实现音乐播放器的具体代码,供大家参考,具体内容如下首先,右键工具箱的组件,找到选择项,找到Windows Media Player组件并添加. 设计界面: 首先实现基本的功能给“”老板播放器“的播放暂停添加代码 MusicPlayer.Ctlcontrols.play(); //播放 MusicPlayer.Ctlcontrols.pause();//暂停 MusicPlayer.Ctlcontrols.stop();//停止首先给Windows
Android基于Service的音乐播放器

本文开发一个基于Service的音乐播放器,音乐由后台运行的Service负责播放,当后台的播放状态发生变化时,程序将会通过发送广播通知前台Activity更新界面:当点击Activity的界面按钮时,系统将通过发送广播通知后台Service来改变播放状态. 前台Activity界面有两个按钮,分别用于控制播放/暂停.停止,另外还有两个文本框,用于显示正在播放的歌曲名.歌手名.前台Activity的代码如下: public class MainActivity extends AppCompat
基于Python实现音乐播放器的实现示例代码

目录一.环境设置二.播放功能三.停止功能四.暂停与恢复五.关闭六.完整代码七.改进一.环境设置第一步引入必须的各类包 import os import tkinter import tkinter.filedialog import random import time import threading import pygame 特别是pygame需要手动安装 pip install pygame 二.播放功能首先选择音乐目录,然后创建播放现成,播放音乐. # 播放按钮 d
基于C#的音乐播放器主Form实现代码

本文所述为一个由C#编写的音乐播放器的主Form代码,里面有一些小技巧还是不错的,现共享给大家参考一下.里面有播放器背景设置.线程定义.调用读取文件目录方法.播放时间计数器.设置LV背景.获取播放歌曲.播放按钮,切换播放or暂停.切换歌曲到下一首,调用切歌方法.显示播放列表.歌词局中.播放窗体最小化隐藏到托盘设置.进度条滚动模块.从歌曲列表中删除文件等等功能.且各个功能模板均备有较为详细的注释,便于大家阅读理解. 程序主要代码如下: using System; using System.Coll
基于python实现音乐播放器代码实例

核心播放模块(pygame内核) import time import pygame import easygui as gui file = r'D:\CloudMusic\G.E.M.邓紫棋,艾热 - 光年之外 (热爱版).mp3' #这里为音乐文件路径 pygame.mixer.init() gui.msgbox("正在播放"+file) track = pygame.mixer.music.load(file) pygame.mixer.music.play() time.sl
基于jquery的无缝循环新闻列表插件

一.效果图:tips源码下载 http://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar二.jquery源码: 复制代码代码如下: (function($){ $.fn.extend({ newsList:function(options){ var defaults ={ actName:'li', //显示条数名: maxShowNum:'6', //最多的显示条数: actNameH:'28', //一次移动的距离: ulClass:'
jQuery开发仿QQ版音乐播放器

本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器,是前端技术的综合应用,所用素材来源于网络,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点在本例中用到的知识点如下,按jQuery和CSS进行区分: jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程,常见知识点如下: 通过标签获取jQuery对象:var $audio =$("audio"); 通过选择符获取jQuery对象并设置文本内容:$(".music_pr

基于jQuery实现音乐播放试听列表

相关推荐

随机推荐