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. jax框架的官方编译版本 —— 预编译发行版本（release 列表）

    jax框架的Google官方给出的预编译版本,支持CUDA和CUDNN的,带有python版本号,CUDA版本号,CUDNN版本号的: https://storage.googleapis.com/j ...

  2. 【转载】 windows python3 安装 openai gym 的 atari_py

    版权声明:本文为CSDN博主「dai1056318647」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/dai ...

  3. 在vscode中通过修改launch.json文件为项目添加环境变量——在launch.json文件中修改env变量

    在vscode中launch.json文件具有十分重要的作用,在vscode中可以通过修改launch.json文件修改调试和运行代码时的设置. 本文假设已对vscode有初步了解,已可以创建laun ...

  4. 这应该是全网最全的CSP-S初赛复习吧

    点我到洛谷看 \(Update\ 2024/8/2:\) 加入了在数据结构中增加了"树",做出部分更改. linux基础命令 cd 切换目录 ls 列出目前工作目录所含的文件及子目 ...

  5. SpringBoot优雅开发REST API最佳实践

    写在前面 博主最近在做一个数据服务的项目,而这个数据服务的核心就是对外暴露的API,值得高兴的这是一个从0开始的项目,所以终于不用受制于"某些历史"因素去续写各种风格的Contro ...

  6. logback日志级别动态切换的四种方案 荐

    生产环境中经常有需要动态修改日志级别. 现在就介绍几种方案 方案一:开启logback的自动扫描更新 配置如下 <?xml version="1.0" encoding=&q ...

  7. Git删除当前分支下的所有历史版本与log

  8. Kummer 定理

    \(n!\) 中含素数 \(p\) 的幂次为 \(\displaystyle\sum_{i=1}\lfloor\frac{n}{p^{i}}\rfloor\) Kummer 定理:\({n+m\cho ...

  9. TOML 使用

    TOML Reference TOML Tom's Obvious, Minimal Language TOML 被设计成可以无歧义地映射为哈希表.(相当于 JSON 对象吧) 注释 # 这是一个全行 ...

  10. Ubuntu 安装 Docker Desktop

    介绍 Docker 有两种版本:Docker Desktop 和 Docker Engine (也称作 Docker CE).Docker Desktop 是带图形界面的版本,非常适合需要在桌面环境中 ...