js实现控制音乐播放

用js实现控制音乐播放其实很简单，但是第一次去做可能会遇到一点点小问题。

比如说我自己，第一次想实现一个播放器效果，然后在网上搜寻半天照着自己的理解写下如下代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title></title>
         <script type="text/javascript">
             var mp3 = document.getElementById("music");
             function start() {
                 mp3.play();
             }
 ​
             function stop() {
                 mp3.pause();
             }
         </script>
     </head>
     <body>
         <video id="music" controls="controls" src="刚好遇见你.mp3">
 ​
         </video>
         <input type="button" id="" value="开始" onclick="start()" />
         <input type="button" id="" value="停止" onclick="stop()" />
     </body>
 </html>

我自己感觉是没有任何问题的，然而事情总是超乎我的意料之外，却又在情理之中。可能是因为js学的太浅了，对js的认知度太低，可以说几乎不懂吧。

这时候Ctrl+S保存，然后Ctrl+R打开浏览器一运行，欸嘿，没反应！然后又打开控制台，看到几行红色，说是什么什么是错误。如图：

咱也看不懂，于是乎就复制到浏览器去搜一下。

搜到的结果也是五花八门，并没有我需要的。

然后又自己思考一番。

先在方法外用console.log(mp3);输出这个变量。

再次打开浏览器按下F12显示null，感觉应该也没问题，毕竟是mp3音频文件。

然后又在方法内用console.log(mp3);输出这个变量，结果在浏览器控制台里面什么也没有显示，这时候就是问题所在了。

可能是变量范围的问题吧！咱也不懂！

于是乎又打开浏览器搜索一番，似懂非懂，大致意思就是说：方法内获取不到方法外的变量，方法内需要调用的变量最好就在方法内写。

但是我印象里好像又有全局变量这种东西，害，咱也不懂！当个规律记下吧！

最后实现效果的代码如下：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title></title>
         <script type="text/javascript">
             function start() {
                 var mp3 = document.getElementById("music");
                 mp3.play();
                 console.log(mp3);//null
             }
             function stop() {
                 var mp3 = document.getElementById("music");
                 mp3.pause();
                 console.log(mp3);//null
             }
         </script>
     </head>
 ​
     <body>
         <video id="music" controls="controls" src="刚好遇见你.mp3">
 ​
         </video>
         <input type="button" id="" value="开始" onclick="start()" />
         <input type="button" id="" value="停止" onclick="stop()" />
     </body>
 </html>

js实现控制音乐播放的更多相关文章

  1. Android中通过耳机按键控制音乐播放的实现

    今天在研究Android中实现Android 4.2.2源码中的Music应用的源码,关于通过耳机按键控制音乐播放的实现,有点好奇,就仔细分析了一下源码, 主要由 MediaButtonIntentR ...

  2. [MAUI 项目实战] 手势控制音乐播放器（一）： 概述与架构

    这是一篇系列博文.请关注我,学习更多.NET MAUI开发知识! [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构 [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互 [MAU ...

  3. [MAUI 项目实战] 手势控制音乐播放器（四）：圆形进度条

    @ 目录 关于图形绘制 创建自定义控件 使用控件 创建专辑封面 项目地址 我们将绘制一个圆形的音乐播放控件,它包含一个圆形的进度条.专辑页面和播放按钮. 关于图形绘制 使用MAUI的绘制功能,需要Mi ...

  4. html5 js控制音乐播放

      <!DOCTYPE HTML><html><head><meta charset="UTF-8"><script lang ...

  5. [MAUI 项目实战] 手势控制音乐播放器（二）： 手势交互

    @ 目录 原理 交互实现 容器控件 手势开始 手势运行 手势结束 使用控件 拖拽物 创建pit集合 项目地址 原理 定义一个拖拽物,和它拖拽的目标,拖拽物可以理解为一个平底锅(pan),拖拽目标是一个 ...

  6. [MAUI 项目实战] 手势控制音乐播放器（三）： 动画

    @ 目录 吸附动画 确定位置 平移动画 回弹动画 使用自定义缓动函数 多重动画 点击动画 项目地址 上一章节我们创建了手势容器控件PanContainer,它对拖拽物进行包装并响应了平移手势和点击手势 ...

  7. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  8. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  9. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  10. 微信小程序-图片、录音、音频播放、音乐播放、视屏、文件

    图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx ...

随机推荐

  1. 图床、云对象存储、CDN业务：“自定义 CDN 加速域名” 与 “自定义源站域名” 的区别

    参考: https://developer.qiniu.com/kodo/8622/dev-the-binding-source-domain-name ----------------------- ...

  2. openAI的仿真环境Gym Retro的Game Integration——新游戏融合（将retro中没有融合的ROM游戏加入其中）

    官方原地址: https://retro.readthedocs.io/en/latest/integration.html#integration-files =================== ...

  3. VcXsrv: 一个好用的Windows X11 Server

    windows10没有系统自带的X11服务器,使用了几款X11的windows下X11服务器软件后发现了一个好用的软件--VcXsrv. 下载地址: https://sourceforge.net/p ...

  4. SMU Summer 2024 Contest Round 8

    SMU Summer 2024 Contest Round 8 Product 思路 注意到 \(\prod\limits_{i=1}^NL_i\le10^5\),也就是说 N 不会超过 16,因为 ...

  5. SMU Autumn 2023 Round 1(Div.1)

    SMU Autumn 2023 Round 1(Div.1) A. Set or Decrease(枚举) 题意就是你可以进行两种操作,将\(a_i-1\)或者令\(a_i\)等于\(a_j\),然后 ...

  6. Linux字节对齐的那些事

    最近一口君在做一个项目,遇到一个问题,ARM上的threadx在与DSP通信采用消息队列的方式传递消息(最终实现原理是中断+共享内存的方式),在实际操作过程中发现threadx总是crash,于是经过 ...

  7. vscode使用说明

    # 要经常保存 # centos打开vscode方式 普通用户:[bw@localhost ~]$ /usr/share/code/bin/code 超级用户:[root@localhost shar ...

  8. Terraform中的for_each和count

    通过Terraform创建云主机时,在某些业务场景下,一个机器需要挂载多个云盘,一般云厂商都是单独创建云主机和云硬盘然后通过attachment的资源去挂载,因此我们的模板大致如下: resource ...

  9. 零基础学习人工智能—Python—Pytorch学习（九）

    前言 本文主要介绍卷积神经网络的使用的下半部分. 另外,上篇文章增加了一点代码注释,主要是解释(w-f+2p)/s+1这个公式的使用. 所以,要是这篇文章的代码看不太懂,可以翻一下上篇文章. 代码实现 ...

  10. Ubuntu 安裝 VMware Workstation Pro

    安装 下载依赖: # Ubuntu 22.04 及以前 sudo apt install libaio1 # Ubuntu 24.04 及以后 sudo apt install libaio1t64 ...