个人中心
gpt4 book ai didi

javascript - 自定义音频播放器问题

转载 作者：搜寻专家 更新时间：2023-10-31 08:28:18 24 4
gpt4 key购买 nike 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/CSS">
            #custom{
                font-family: monospace;
            font-size: 16px;
            max-width: 650px;
            border-style: solid;
            border-color: black;
            border-width: 1px;
            border-radius: 5px;
            padding: 8px;
            padding-bottom: 15px;
            padding-left: 12px;
            padding-right: 12px;
        }
        img{
            margin-top: 3px;
            float: left;
        }
        #bar, #currentTime, #duration, #skip{
            display: inline-block;
        }
        #currentTime, #duration, #skip{
            margin: 0px;
            padding: 0px;
            margin-top: 3px;
            margin-left: 10px;
        }
        #bar{
            margin-top: 10px;
            height: 14px;
            width: 400px;
            background: lightgrey;
            border-radius: 50px;
            margin-left: 9px;

        }
        #slider{
            height: 14px;
            width: 15px;
            background: black;
            border-radius: 50px;
        }
    </style>
</head>
<body onLoad="count()">
    <script type="text/javascript">
        var track = 0;
        function count(){       
            var music = document.getElementById("myAudio");
            var duration = music.duration;
            var durationInMins = Math.floor(duration/60);
            var durationInSecs = Math.floor(duration-(durationInMins*60));
                if(durationInSecs < 10){
                    var durationInSecs = "0" + durationInSecs;
                }
                if(durationInMins < 10){
                    var durationInMins = "0" + durationInMins;
                }
            document.getElementById("duration").innerHTML = durationInMins + ":" + durationInSecs;
            var timer = setInterval( 
                function(){
                    var music = document.getElementById("myAudio");
                    var currentTime = music.currentTime;
                    if(currentTime > 60){
                        var min = Math.floor(currentTime/60);
                        var sec = Math.floor(currentTime-(min*60)); 
                    }else{
                        var min = "0";
                        var sec = Math.floor(music.currentTime);                        }
                    if(sec < 10){
                        var sec = "0" + sec;
                    }
                    if(min < 10){
                        var min = "0" + min;
                    }
                    document.getElementById("currentTime").innerHTML = min + ":" + sec;                     var percent = 100 * (music.currentTime/duration) - 2;
                    document.getElementById("slider").style.marginLeft=percent + "%";
                }
            , 1000);
            }
        function toggleP(){
            var music = document.getElementById("myAudio");
            if(music.paused == true){
                music.play();
            }else if(music.paused == false){
                music.pause();
            }
        }
        function skip(){
            var trackList = ["http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3", "http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3"];
            if(go == "back"){
                track = track - 1;
            }
            if(go == "forward"){
                track = track + 1;
            }
            var aa = clearInterval("timer");
            var music = document.getElementById("myAudio");
            music.pause();
            music.src=trackList[track];
            music.load();
            var a = setTimeout(function(){music.play(); count();} , 6000);
        }
    </script>
    <audio id="myAudio" src="http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3">
    </audio>
    <br>
    <div id="custom">
            <img onClick="toggleP()" src="img/media-play-pause-resume.png" height="30px"/>
        <p id="currentTime">00:00</p>
        <div id="bar">
            <div id="slider"></div>
        </div>
        <p id="duration">00:00</p>
        <p id="skip"><strong><a onClick="go = 'back'; skip()"><<</a> <a onClick="go = 'forward'; skip()">>></a><strong></p>
    </div>
</body>

谁能告诉我为什么在跳到第二首歌曲后歌曲时长 slider 会前后跳动？以及为什么不能在不移动所有内容的情况下使用 margin-top 向下移动持续时间栏。我只是想不通。任何帮助将不胜感激，谢谢。

最佳答案

jsBin demo

不要在您的 HTML 中使用内联 JS!使代码难以调试。让您的逻辑远离您的演示文稿/模板。

首先，变量是如何工作的？一旦设置了 var，就无需在代码中使用 var 再次实例化相同的 var。只需使用/修改它。所以一旦你设置在顶部

function el(id){return document.getElementById(id);} // Helps get easily an element

var el_music    = el("myAudio"), // see?
    el_trackInfo= el("trackInfo"),
    el_duration = el("duration"),
    el_currTime = el("currentTime"),
    el_slider   = el("slider"),
    el_prev     = el("prev"), // assign ID to your prev/next buttons!
    el_next     = el("next"),
    el_togg     = el("toggle"),
    currentTime,    
    trackList = [],
    track = -1,    // Later we'll set it to 0 index triggering auto start
    totTrack = trackList.length;

...您可以开始了。您的代码中不再有 var 语句。

您可能想向用户显示更多信息。
存储数据的一种好方法是创建具有所需属性的对象:

trackList = [
  {
    artist : "The Doors",
    fileName : "People Are Strange",
    file : "http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3"
  },
  {
    artist : "ACDC",
    fileName : "Back In Black",
    file : "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"
  },
  {
    artist : "Four Seasons",
    fileName : "Oh What A Night",
    file : "http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3"
  }
]

现在您不仅可以获得所需的音频路径，还可以向用户显示有关轨道的更多信息。

不要重复自己。到处计算时间会使您的代码不是模块化的而是困惑的。而是创建一个函数来帮助您返回所需的格式化时间:

function getTime(t) { // `t` is some time value
  var m = ~~(t / 60),
      s = ~~(t % 60);
  return (m<10?"0"+m:m) +':'+ (s<10?"0"+s:s); // returns i.e: "01:25"
}

创建一个进度函数，如:

function progress() {
  el_currTime.innerHTML = getTime(el_music.currentTime); // see how our getTime fn is used?
  el_duration.innerHTML = getTime(el_music.duration);
  el_slider.style.marginLeft = Math.floor(100/el_music.duration*el_music.currentTime) + "%";
}

比播放/暂停:

function playPause(){
  var isPaused = el_music.paused;
  el_music[isPaused ? "play" : "pause"]();
  el_togg.innerHTML = isPaused ? "&#10074;&#10074;" : "&#9658;" ;
}

对于 PREV/NEXT，将 ID 分配给您的按钮 id="prev" 和 id="next" 并再次创建一个函数来处理这两种点击情况:

function skip(){ // This gets triggered by both prev / next buttons.
  track = this.id==="next" ? ++track : --track; // Next clicked' increment, else decr.
  track = track < 0 ? totTrack-1 : track%totTrack; // Allows you to loop infinitely the index
  var trackToPlay = trackList[ track ]; // Get the Track Object "{}"
  el_trackInfo.innerHTML = trackToPlay.artist+' '+trackToPlay.fileName;
  el_music.src = trackToPlay.file;
  el_music.addEventListener('canplaythrough', el_music.play);
}

信不信由你 - 大功告成!
有了所有这些漂亮的功能，您现在需要的是一些事件监听器:

el_prev.addEventListener("click", skip);
el_next.addEventListener("click", skip);
el_togg.addEventListener("click", playPause);
el_music.addEventListener("timeupdate", progress);
el_music.addEventListener("ended", playPause);

el_next.click(); // Auto Start playing!

现在您可能想知道您的 interval 1000 函数哪里去了？它仅由 el_music.addEventListener("timeupdate", progress); 处理。

关于javascript - 自定义音频播放器问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30810237/

24 4 0
文章推荐： javascript - 为什么它以随机顺序初始化这个 Knockout.js 组件？
文章推荐： ios - swinject 是否重新实例化对象？
文章推荐： java - 如何通过网络共享jboss
文章推荐： html - 在AngularJS中从page2导航回来后如何保留page1的输入数据
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com