• 如何写最基础的播放音频界面

    这篇就是基础介绍写法

    这里要用到的标签是它其实和、

    < img src=" "> 

    < audio src=" ">

    < video src=" ">

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>听音小屋</title>
    6.     
    7. </head>
    8. <body>
    9.  
    10. <audio src="./光年之外.mp3" ></audio>
    11.  
    12. </body>
    13. </html>

    但是光是如此播放不了的，没有控制面板

    所以我们要加上它的controls属性

    这样才能播放

    关于它的js呢

    在控制台上操作

     我们可以看出oAudio的类型是一个对象，而这个对象实际上就是HTMLAudioElement

    所以我们可以通过这个对象控制播放器

    直接上方法

    oAudio.src="……"  换歌

    oAudio.play()          播放

    oAudio.pause()       暂停

    oAudio.currentTime当前时间（修改oAudio.currentTime也可以修改当前播放位置）

    oAudio.duration      总时长

    oAudio.muted          静音（如果oAudio.muted =true就静音，false就取消静音）

    oAudio.volume        控制声音大小（最大值为1）

    利用这些方法至少可以做出能用的播放器

    具体写法

    1. <!DOCTYPE html>
    2. <html lang="zh-hans">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>播放音乐</title>
    6.     <style>
    7.         body {
    8.             display: flex;
    9.             flex-direction: column;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.     <audio src="./光年之外.mp3"></audio>
    15.     <button class="playPause">播放</button>
    16.     <button class="prev">上一首</button>
    17.     <button class="next">下一首</button>
    18.     <div>当前时间: <span class="currentTime"></span></div>
    19.     <div>总时间: <span class="duration"></span></div>
    20.     <div>
    21.         <input type="text" id="progress"><button class="jumpTo">跳到此处</button>
    22.     </div>
    23.     <button class="volumeUp">声音增加</button>
    24.     <button class="volumeDown">声音减少</button>
    25.  
    26.     <script>
    27.         var mp3 = ['光年之外', '句号', '诀爱']
    28.         var currentIndex = 0
    29.         var playing = false
    30.  
    31.         var oAudio = document.querySelector('audio')
    32.         document.querySelector('.playPause').onclick = function() {
    33.             if (playing) {
    34.                 oAudio.pause()
    35.                 this.textContent = '播放'
    36.             } else {
    37.                 oAudio.play()
    38.                 this.textContent = '暂停'
    39.             }
    40.  
    41.             playing = !playing
    42.         }
    43.  
    44.         document.querySelector('.prev').onclick = function() {
    45.             currentIndex--;
    46.             if (currentIndex < 0) {
    47.                 currentIndex = 2;
    48.             }
    49.             var name = "./" + mp3[currentIndex] + ".mp3";
    50.             oAudio.src = name
    51.         }
    52.  
    53.  
    54.         document.querySelector('.next').onclick = function() {
    55.             currentIndex++;
    56.             if (currentIndex > 2) {
    57.                 currentIndex = 0;
    58.             }
    59.             var name = "./" + mp3[currentIndex] + ".mp3";
    60.             oAudio.src = name
    61.         }
    62.  
    63.         oAudio.ontimeupdate = function() {
    64.             var ct = oAudio.currentTime
    65.             var ctm = Math.floor(ct / 60)
    66.             var cts = Math.floor(ct % 60)
    67.             document.querySelector('.currentTime').textContent = ctm + ":" + cts
    68.  
    69.  
    70.             var dt = oAudio.duration
    71.             var dtm = Math.floor(dt / 60)
    72.             var dts = Math.floor(dt % 60)
    73.             document.querySelector('.duration').textContent = dtm + ":" + dts
    74.         }
    75.  
    76.         document.querySelector('.jumpTo').onclick = function() {
    77.             var p = parseInt(document.querySelector('#progress').value)
    78.             if (p < 0) { p = 0 }
    79.             if (p > 100) { p = 100 }
    80.  
    81.             var ct = p / 100 * oAudio.duration;
    82.             oAudio.currentTime = ct
    83.  
    84.             document.querySelector('#progress').value = ''
    85.         }
    86.  
    87.         document.querySelector('.volumeUp').onclick = function() {
    88.             var volume = oAudio.volume;
    89.             volume += 0.1
    90.             if (volume > 1) {
    91.                 volume = 1
    92.             }
    93.             oAudio.volume = volume
    94.         }
    95.  
    96.         document.querySelector('.volumeDown').onclick = function() {
    97.             var volume = oAudio.volume;
    98.             volume -= 0.1
    99.             if (volume < 0) {
    100.                 volume = 0
    101.             }
    102.             oAudio.volume = volume
    103.         }
    104.     </script>
    105. </body>
    106. </html>

     

  • 相关阅读:
    cas与volatile
    FFTW库在Windows中的安装和使用
    设计一个网络爬虫(Python)
    玩推特营销必知的基础常识上篇
    Duchefa丨S0188盐酸大观霉素五水合物中英文说明书
    JAVA常用工具类
    基于springboot地方废物回收机构管理系统springboot11
    SPFA和链式前向星
    dhtmlx-gantt甘特图数据展示
    【找不到视图问题解决】@RestController 与 @Controller注解的使用区别
  • 原文地址：https://blog.csdn.net/MM2LYF/article/details/126714712