寻找加载 url 一次然后能够单击元素的解决方案

Question

我需要帮助将 URL 一次加载到 HTML5 音频播放器，然后能够单击一个元素来执行其他控制。

这是目前的代码：

<div class="primary">
 <article id="145">
  <div class="loaddata" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3" onclick="setTimeout(function() { document.getElementById('145').classList.add('dataloaded'); }, 1)"> Load "Song1" </div>
 </article>

 <article id="139">
  <div class="loaddata" data-rel="http://feeds.soundcloud.com/stream/327164631-scott-johnson-27-tms-1281.mp3" onclick="setTimeout(function() { document.getElementById('139').classList.add('dataloaded'); }, 1)"> Load "Song2" </div>
 </article>

 <article id="133" class="dataloaded">
  <div class="loaddata" data-rel="http://archive.org/download/DTH20170611/DTH20170611.mp3" onclick="setTimeout(function() { document.getElementById('133').classList.add('dataloaded'); }, 1)"> Load "Song3" </div>
 </article>

玩家：

<div class="audio-player-wrapper">
<div class="mejs__button mejs__group-left">
<div class="rewind-btn">
  <button title="Rewind 15 seconds">15</button>
</div>
<div class="playpause-btn">
  <button title="Play" class="play" id="ppbtn"></button>
</div>
<div class="forward-btn">
  <button title="Forward 15 seconds">15</button>
</div>
</div>
<div class="current-time">00:00</div>
<div class="duration-time">00:00</div>
<div class="mejs__button mobile-mute">
<button class="mobile-mute-btn mobile-mute-off"></button>
</div>
<audio width="100%" height="75px" id="audio-player" controls="controls">
  <source id="sourceMp3" src="#" type="audio/mp3">
</audio>
</div>

JS:

$(".loaddata").on("click", function() {
var mp3Url = $(this).data('rel');
$("#audio-player_html5").attr('src', mp3Url);
});
$(".loaddata").click(function(){
$('.dataloaded').removeClass();
$('#ppbtn').click();
});

上面的代码所做的是，当用户点击 loaddata 时，JS 将 data-rel 中的 url 加载到 sourceMP3 中的 src 中。然后它扫描 'primary' 以查找任何名为 dataloaded 的 class 并将其删除。一毫秒后，它将 dataloaded 添加到文章 ID。然后播放器开始播放 jquery $('#ppbtn').click();.

中加载的 URL

我试图找到一种在第一次点击时加载 URL 然后能够在第一次点击后控制 play/pause 按钮的方法。我尝试在加载 URL 时执行 .one() 一次，但是当所有三个元素都被单击一次时，它不会加载单击元素中的 URL 和所有三个元素 div.loaddata可以控制玩家

我想最简单的解释方法是：删除现有的 .dataloaded，将 URL 添加到播放器，将 .dataloaded 添加到被点击的文章然后只能在 div.loaddata 和 'dataloaded' 上单击 play/pause 按钮。

新问题：有没有办法在点击元素时改变一个功能？喜欢新的点击？

Answer 1

我今天早上看到了这个答案（但今天很忙！）..我前段时间创建了一个 jsfiddle for playing multiple sounds 但是当我今天晚上重新阅读这个问题时，它似乎不足以涵盖你想做什么。

我发现有一个名为 MediaElement.js 的库可用； this article and there is a demo 和

中广泛概述了源代码

另外还有一篇关于 Rose 设计自定义音频播放器的非常好的（有点长！）文章（未提供第二个名字）on her website where there is also a demo

最重要的是，那个答案中的一位 SO-er gives to a similar question (about a year ago) and there is a jsfiddle provided（我认为是首选……）

代码（希望有空间！）：

var audio_player = $("#audio-player");
var play_button = $('#play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var info_tray = $("#info-tray");
var player = document.getElementById('player');
var duration = 0;
var volume = 0.75;

player.onloadedmetadata = function() {
    duration = player.duration;
    progress_bar.progressbar("option", { 'max' : duration });
};

player.load();
player.volume = 0.75;
player.addEventListener("timeupdate", function() {
    progress_bar.progressbar('value', player.currentTime);
    time.text(getTime(player.currentTime));
}, false);

function getTime(t) {
    var m=~~(t/60), s=~~(t % 60);
    return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}

function getProgressBarClickInfo(progress_bar, e) {
    var offset = progress_bar.position();
    var x = e.pageX - offset.left; // or e.offsetX (less support, though)
    var y = e.pageY - offset.top;  // or e.offsetY
    var max = progress_bar.progressbar("option", "max");
    var value = x * max / progress_bar.width();

    return { x: x, y: y, max: max, value: value };
}

volume_bar.progressbar({
    value : player.volume*100,
});

volume_bar.click(function(e) {
    var info = getProgressBarClickInfo($(this), e);
    volume_bar.progressbar('value', info.value);
    player.volume = info.value / info.max;
});

progress_bar.progressbar({
    value : player.currentTime,
});

progress_bar.click(function(e) {
    var info = getProgressBarClickInfo($(this), e);
    player.currentTime = player.duration / info.max * info.value;
});

play_button.click(function() {
    player[player.paused ? 'play' : 'pause']();
    $(this).toggleClass("fa-play", !player.paused);
    $(this).toggleClass("fa-pause", player.paused);
});

mute_button.click(function() {
    if (player.volume == 0) {
        player.volume = volume;
    } else {
        volume = player.volume;
        player.volume = 0;
    }

    volume_bar.progressbar('value', player.volume * 100);

    $(this).toggleClass("fa-volume-up", player.volume != 0);
    $(this).toggleClass("fa-volume-off", player.volume == 0);
});

more_info.click(function() {
    audio_player.animate({
        height: (audio_player.height() == 50) ? 100 : 50
    }, 1000);
});

#audio-player {
    height: 50px;
    width: 500px;
    overflow: hidden;
    background-color: #2B2B2B;
    color: white;
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

#controls {
    height: 50px;
    background-color: #808080;
    width: 350px;
}

.time {
    font-size: 10px;
    color: white;
    position: relative;
    top: 14px;
    margin: 5px;
}

.ui-progressbar {
    background: #2B2B2B;
}

.ui-progressbar-value {
    background: white;
}

#progressbar, #volume {
    height: 10px;
    display: inline-block;
    border-radius: 0px;
    border: none;
    position: relative;
    top: 16px;
}

#progressbar {
    width: 150px;
}

#play, #mute {
    font-size: 16px;
    width: 20px;
    position: relative;
    top: 17px;
}

#play {
    margin-left: 15px;
}

#volume {
    width: 50px;
}

#more-info-box {
    display: inline-block;
    width: 150px;
    height: 50px;
    position: relative;
    left: 350px;
    top: -50px;
    padding-top: 18px;
    text-align: center;
    font-family: sans-serif;
    font-size: 12px;
    color: white;
}

#more-info-box, #more-info-box > span {
    cursor: context-menu;
}

#info-tray {
    display: inline-block;
    color: white;
    position: relative;
    width: 100%;
    top: -65px;
    height: 50px;
    padding: 5px;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<audio id="player">
    <source src="http://www.noiseaddicts.com/samples_1w72b820/2543.mp3" type="audio/mpeg" />
</audio>

<div id="audio-player">
    <div id="controls">
        <i id="play" class="fa fa-pause"></i>
        <span id="start-time" class="time">00:00</span>
        <div id="progressbar"></div>
        <span id="time" class="time">00:00</span>
        <i id="mute" class="fa fa-volume-up"></i>
        <div id="volume"></div>    
    </div>
    <div id="more-info-box">
        <span id="more-info">MORE INFO</span>
    </div>
    <div id="info-tray">
        Track: <span id="track">Semper Fidelis March</span>
    </div>
</div>

希望这些解决方案之一对您有所帮助！

Answer 2

我找到了可行的解决方案。它不漂亮，但它有效。

首先我有两个元素，一个加载数据，另一个控制播放器。

<article id="145">
  <div class="loaddata" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3" onclick="setTimeout(function() { document.getElementById('145').classList.add('dataloaded');document.getElementById('145').classList.add('dataloaded'); }, 1);"> Load "Song1" </div>
  <div class="front-playpause">song loaded</div>
</article>

JS:

$(".loaddata").on("click", function() {
var mp3Url = $(this).data('rel');
$("#audio-player_html5").attr('src', mp3Url);
$('.dataloaded').removeClass();
$('#ppbtn').click();
});
$(".front-playpause").click(function(){
$('#ppbtn').click();
});

CSS:

.front-playpause {display:none}
.dataloaded .front-playpause {display:block}
.dataloaded .loaddata {display:none}

单击 loaddata 时，它会添加 class 'dataloadedto the article ID and then the CSS hidesloaddataand then displaysfront-playpause`，这就是我找到解决方法的方法。

感谢大家的帮助。

寻找加载 url 一次然后能够单击元素的解决方案

Looking for a solution to load a url once then be able to click on element

javascript

jquery

html5-audio

mediaelement.js