How do i add multiple audio tracks from my array list

问题

want to have multiple audio tracks for a single video file similar to this one https://codepen.io/eabangalore/pen/NZjrNd (they are using their own js with videojs)

i have list of sound tracks that i want to switch:

var usersAudioTrackList =  ["https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/glass.mp3","https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/door_bump.mp3","https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/camera_flashing_2.mp3"]

i have read doccumentation but did not understand: https://docs.videojs.com/tutorial-audio-tracks.html

PLEASE SEE codepen https://codepen.io/eabangalore/pen/pXPbwp?editors=1010 (as below code is not working).

tried something like below:

$(function(){
  var $refreshButton = $('#refresh');
  var $results = $('#css_result');
  
  function refresh(){
    var css = $('style.cp-pen-styles').text();
    $results.html(css);
  }

  refresh();
  $refreshButton.click(refresh);
  
  // Select all the contents when clicked
  $results.click(function(){
    $(this).select();
  });
  
var usersAudioTrackList = [{
  id: 'my-1',
  kind: 'translation',
  label: 'kannada',
  language: 'kannada',
  audio:'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/glass.mp3',
},

{
  id: 'my-2',
  kind: 'translation',
  label: 'tamil',
  language: 'tamil',
  audio:'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/door_bump.mp3',
},

{
  id: 'my-3',
  kind: 'translation',
  label: 'marathi',
  language: 'marathi',
  audio:'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/camera_flashing_2.mp3',
}];
  
  // Create a player.
var player = videojs('my_video_1');
  
 for(var i = 0; i < usersAudioTrackList.length; i++){
    // Create a track object.
    var track = new videojs.AudioTrack();

    // Add the track to the player's audio track list.
    player.audioTracks().addTrack(track);
 }
});

/*
  Player Skin Designer for Video.js
  http://videojs.com

  To customize the player skin edit 
  the CSS below. Click "details" 
  below to add comments or questions.
  This file uses some SCSS. Learn more  
  at http://sass-lang.com/guide)

  This designer can be linked to at:
  https://codepen.io/heff/pen/EarCt/left/?editors=010
*/

// The following are SCSS variables to automate some of the values.
// But don't feel limited by them. Change/replace whatever you want. 

// The color of icons, text, and the big play button border.
// Try changing to #0f0
$primary-foreground-color: #fff; // #fff default

// The default color of control backgrounds is mostly black but with a little
// bit of blue so it can still be seen on all-black video frames, which are common.
// Try changing to #900
$primary-background-color: #2B333F;  // #2B333F default

// Try changing to true
$center-big-play-button: false; // true default

.video-js {
  /* The base font size controls the size of everything, not just text.
     All dimensions use em-based sizes so that the scale along with the font size.
     Try increasing it to 15px and see what happens. */
  font-size: 10px;

  /* The main font color changes the ICON COLORS as well as the text */
  color: $primary-foreground-color;
}

/* The "Big Play Button" is the play button that shows before the video plays.
   To center it set the align values to center and middle. The typical location
   of the button is the center, but there is trend towards moving it to a corner
   where it gets out of the way of valuable content in the poster image.*/
.vjs-default-skin .vjs-big-play-button {
  /* The font size is what makes the big play button...big. 
     All width/height values use ems, which are a multiple of the font size.
     If the .video-js font-size is 10px, then 3em equals 30px.*/
  font-size: 3em;

  /* We're using SCSS vars here because the values are used in multiple places.
     Now that font size is set, the following em values will be a multiple of the
     new font size. If the font-size is 3em (30px), then setting any of
     the following values to 3em would equal 30px. 3 * font-size. */
  $big-play-width: 3em; 
  /* 1.5em = 45px default */
  $big-play-height: 1.5em;

  line-height: $big-play-height;
  height: $big-play-height;
  width: $big-play-width;

  /* 0.06666em = 2px default */
  border: 0.06666em solid $primary-foreground-color;
  /* 0.3em = 9px default */
  border-radius: 0.3em;

  @if $center-big-play-button {
    /* Align center */
    left: 50%;
    top: 50%;
    margin-left: -($big-play-width / 2);
    margin-top: -($big-play-height / 2);   
  } @else {
    /* Align top left. 0.5em = 15px default */
    left: 0.5em;
    top: 0.5em;
  }
}

/* The default color of control backgrounds is mostly black but with a little
   bit of blue so it can still be seen on all-black video frames, which are common. */
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
  /* IE8 - has no alpha support */
  background-color: $primary-background-color;
  /* Opacity: 1.0 = 100%, 0.0 = 0% */
  background-color: rgba($primary-background-color, 0.7);
}

// Make a slightly lighter version of the main background
// for the slider background.
$slider-bg-color: lighten($primary-background-color, 33%);

/* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider {
  background-color: $slider-bg-color;
  background-color: rgba($slider-bg-color, 0.5);
}

/* The slider bar color is used for the progress bar and the volume bar
   (the first two can be removed after a fix that's coming) */
.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
  background: $primary-foreground-color;
}

/* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress {
  /* For IE8 we'll lighten the color */
  background: lighten($slider-bg-color, 25%);
  /* Otherwise we'll rely on stacked opacities */
  background: rgba($slider-bg-color, 0.5);
}

/* The load progress bar also has internal divs that represent
   smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
  /* For IE8 we'll lighten the color */
  background: lighten($slider-bg-color, 50%);
  /* Otherwise we'll rely on stacked opacities */
  background: rgba($slider-bg-color, 0.75);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/5-unsafe/video.js"></script>


<!--
  Don't use the "5-unsafe" CDN version in your own code. It will break on you. 
  Instead go to videojs.com and copy the CDN urls for the latest version.
-->

<div id="instructions">

  <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
      controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
      data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
  </video>

  <p>Custom skin for <a href="http://www.videojs.com" target="_blank">video.js</a>. Requires v5.0.0 or higher.</p>
  
  <h2>HOW TO CUSTOMIZE:</h2>
  <ol>
    <li>Click the CodePen <strong>Fork</strong> link above to create a new copy</li>
    <li>Change the CSS (SCSS) as desired</li>
    <li>Click <strong>Save</strong> to save your changes</li>
    <li>Click <strong>Settings</strong> to name and describe your skin</li>
    <li>Click the <strong>Share</strong> link to tweet your skin, and include @videojs so we know about it</li>
  </ol>
  <h2>HOW TO USE:</h2>
  <ol>
    <li>Click "Refresh" if you made any changes</li>
    <li>Copy the CSS contents of the following box</li>
    <li>Include it in the page with your player in a &lt;style&gt; tag or with a <a href="https://www.w3schools.com/css/css_howto.asp">stylesheet include</a></li>
  </ol>
  <textarea id="css_result"></textarea>
  <button id="refresh">Refresh</button>
</div>
  
<style>
  #instructions { max-width: 640px; text-align: left; margin: 30px auto; }
  #instructions textarea { width: 100%; height: 100px; }
  
  /* Show the controls (hidden at the start by default) */
  .video-js .vjs-control-bar { 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  /* Make the demo a little prettier */
  body {
    margin-top: 20px;
    background: #222;
    text-align: center; 
    color: #aaa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: radial-gradient(#333, hsl(200,30%,6%) );
  }

  a, a:hover, a:visited { color: #76DAFF; }
</style>

Question: i want to achieve similar result as this one https://codepen.io/eabangalore/pen/NZjrNd

Codepen(working code): https://codepen.io/eabangalore/pen/pXPbwp?editors=1010

Please help me thanks in advance!!

回答1:

It looks like you were pushing empty track data into the playlist. Try:

usersAudioTrackList.forEach( data => {
  const track = new videojs.AudioTrack(data);
  player.audioTracks().addTrack(track);
});

回答2:

I think you totally misunderstood the concept Video has audio tracks en and Spanish.

audioTracks = myPlayer.audioTracks();

Here they take audio tracks from video then according to browser language if it is Eng or Spanish they play the right video with right audio. What you are trying to do is play a titanic video video which has its own audio glass.mp3 and you want to put your ding sound glass.mp3 on it. If you want to do audio mix use Audacity Audio auditing tool and not JavaScript. https://www.youtube.com/watch?v=iDf8BV8kj8Q

回答3:

I think you've missed an important caveat in the documentation: "Video.js only stores track representations. Switching audio tracks for playback is not handled by Video.js and must be handled elsewhere - for example, videojs-contrib-hls handles switching audio tracks to support track selection through the UI."

Videojs plays a video file that you provide it, and that's it. That video file is expected to have all necessary audio tracks and video tracks defined inside it. This is further evidenced in the codepen you provided, as you see no external source links to sound files, only the link to the video itself. The video file is structured and created with several tracks builtin for the different languages they've provided. That is what you would need to do. Those audio track definitions you see and that you've created are only telling videojs of the existence of the tracks in the video file so that you can switch between those that exist, but not adding completely new audio files to the playback.

Alternatively, as mentioned in that quote, there are other libraries that claim they can do this type of thing, but it's not something videojs tries to solve.

回答4:

As per the documentation, you need to follow below steps:

Create the Track Object First, from the tracks in the list:

 // Create a track object.
      var track = new videojs.AudioTrack({
            id: 'my-spanish-audio-track',
            kind: 'translation',
            label: 'Spanish',
            language: 'es'
   });

Add the Track to the Player's Audio track list, by looping over the tracklist:

 // Add the track to the player's audio track list.
   player.audioTracks().addTrack(track);

const usersAudioTrackList = [{
  id: 'my-1',
  kind: 'translation',
  label: 'kannada',
  language: 'kannada',
  audio:'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/glass.mp3',
},

{
  id: 'my-2',
  kind: 'translation',
  label: 'tamil',
  language: 'tamil',
  audio:'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/door_bump.mp3',
},

{
  id: 'my-3',
  kind: 'translation',
  label: 'marathi',
  language: 'marathi',
  audio:'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/camera_flashing_2.mp3',
}];
  
var player = videojs('my_video_1');
usersAudioTrackList.forEach(track => {
  
  player.audioTracks().addTrack(
      new videojs.AudioTrack(track) // Create a track object.
   );
 });

So you need to pass the track while looping over tracklist to the player

来源：https://stackoverflow.com/questions/56721713/how-do-i-add-multiple-audio-tracks-from-my-array-list

标签

javascript

jquery

video.js